1 定位属性(position)
1.1 定义
position 属性指定了元素的定位类型。 取值:
- static 静态定位【默认值】
- relative 相对定位
- absolute 绝对定位
- fixed 固定定位
- sticky 粘性定位
1.1.1 static 定位
HTML 元素的默认值,即没有定位,遵循正常的⽂档流对象。 静态定位的元素不会受到 top, bottom, left, right影响。
.static {
position:static;
background-color:red;
}
1.1.2 relative 定位
相对定位元素的定位是相对自身的正常位置。 移动相对定位元素,但它原本所占的空间不会改变。 相对定位元素经常被⽤来作为绝对定位元素的容器块。
.relative {
position:relative;
}
1.1.3 absolute 定位
绝对定位的元素的位置相对于最近的已定位⽗元素,如果元素没有已定位的⽗元素,那么它的位置相对于文档定位。 absolute 定位使元素的位置与⽂档流⽆关,因此不占据空间。 absolute 定位的元素和其他元素重叠。
.absolute {
position:absolute;
left:20px;
top:20px;
}
1.1.4 fixed 定位
元素的位置相对于浏览器窗⼝是固定位置。 即使窗⼝是滚动的它也不会移动。
.fixed {
position:fixed;
left:20px;
top:20px;
}
1.1.5 sticky 定位
- 基于⽤户的滚动位置来定位
- 在未滚动出目标区域时,类似 position:relative;
- 当⻚⾯滚动超出⽬标区域时,类似 position:fixed;,它会固定在⽬标位置。
- 元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位
这个特定阈值指的是 top, right, bottom 或 left 之⼀,换⾔之,指定 top, right, bottom 或 left 四个阈值其中之⼀,才可使粘性定位⽣效。否则其⾏为与相对定位相同。 注意: Internet Explorer, Edge 15 及更早 IE 版本不⽀持 sticky 定位。 Safari 需要使⽤ -webkit- prefix。
.sticky{
position:-webkit-sticky;
position:sticky;
top:0;
background-color:red;
border:2px solid orange;
}
1.2 堆叠的元素
- 元素的定位与⽂档流⽆关,所以它们可以覆盖⻚⾯上的其它元素
- z-index属性指定了⼀个元素的堆叠顺序(哪个元素应该放在前⾯,或后⾯)
- ⼀个元素可以有正数或负数的堆叠顺序
具有更⾼堆叠顺序的元素总是在较低的堆叠顺序元素的前⾯。 注意: 如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前⾯。
.zindex {
position:absolute;
left:0;
top:0;
z-index:-1;
}
1.3 position 难点分析
1.3.1 绝对定位vs相对定位
- 绝对定位就像把不同元素安排到了⼀栋楼的不同楼层,文本流在首层,互不影响
- 相对定位在首层,与文本流在同一层,互相影响
- 绝对定位元素不占据空间,设置绝对定位后,元素浮起来,在文档流中位置被删除,可以被其他元素占据
- 相对定位也让元素浮起来,但是它本身位置不会被删除,也不会被占据
- 通过z-index来设置堆叠的顺序
1.3.2 层级问题
总结:标准流盒子,低于浮动的盒子,浮动的盒子又低于定位的盒子。 定位高于浮动,浮动高于标准流。(高低和占不占位置无关) 给定 z-index 的值为层级的值。(不给默认为0)
- 层级为 0 的盒子,也比标准流和浮动高
- 层级为负数的盒子,比标准流和浮动低
- 层级不取小数
- 层级一样,后面的盒子比前面的层级高
- 浮动或者标准流的盒子,后面的盒子比前面的层级高
- abselute是不占位置的,relative是站位的。而层级的高低,是和占不占位置没有关系的。