标签：部分 取消 基础 滚动条 设置 添加 排列 span 块元素
css中有三种基本的定位机制：普通流、浮动流、定位流
1、普通流：上下排列的布局 （大部分情况）
2、浮动流：左右排列的布局 （大部分情况）
3、定位流：层叠（叠加）排列布局（大部分情况）
position：检索或设置对象的定位方法
static ：默认值，没有定位，可以用于取消元素之间的定位设置
relative：相对定位（参照物是自身所在的位置）
如果没有定义偏移量，对元素本身没有任何影响
不使元素脱离文档流，空间是会保留
不影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移，不能独自存在，必须配合定位元素进行使用
absolute：绝对定位（参照物：包含块-该元素的祖先级元素）
使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联属性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
注：如果祖先元素中有多个元素具备定位属性，那么是以离自己最近的祖先元素进行偏移
注：默认情况下是相对于可视窗口进行定位的。
包含块：包含块是绝对定位的基础
绝对定位元素会根据包含块进行绝对定位，默认情况下，浏览器的可视窗口是一个大的包含块，默认情况下，绝对定位元素会相对浏览器的可视窗口进行定位；如果他的祖先级元素定义里包含块，那他就最近的祖先级元素进行绝对定位。
如何给祖先级元素定义成包含块：给祖先级元素添加position：relative/absolute/fixed。
绝对定位和相对定位的区别
1、相对定位的参照物是自己本身所在的位置，绝对定位的参照物是包含块
2、相对定位是不会脱离文档流的，而且不会对页面的布局产生影响；绝对定位是会脱离文档流的，之前的位置就不再占用，后面的内容会把位置补上去
z-index：auto/ number 检索或设置对象的层叠顺序
auto：默认值
number：无单位的整数值。可为负数
没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上
注：他只针对具有定位属性的元素起作用
fixed：固定定位（参照物：始终都是相对于整个浏览器窗口进行固定定位的）
使元素完全脱离文档流
是内联元素支持宽高(让内联具备内联块属性)
使块元素默认宽根据内容决定（让内联具备内联块属性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响，不会受到祖先元素的影响
sticky 黏性定位
在没有到达指定位置的时候，是没有定位效果的，到达了指定位置，就变成了固定模式。
只支持top和left方向
设置了sticky的元素，在屏幕范围时该元素的位置并不受定位影响（设置top、left等属性无效），当该元素的位置将要移出偏移范文时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
标签：部分 取消 基础 滚动条 设置 添加 排列 span 块元素
原文地址：https://www.cnblogs.com/shewill/p/13051384.html
