定位有很多种方式
-
static 默认值(不定位)
-
relative 相对定位
-
absolute 绝对定位
-
fixed 固定定位
-
sticky 粘性定位
relative 相对定位
- top
- left
- right
- bottom
当我们给一个元素添加了相对定位属性,该元素默认情况下不会有任何的变化。我们可以通过上下左右四个值调整元素的位置。虽然我们会看到元素位置改变,但是,对于布局来讲,元素位置就像没有改变一样
.box {
position: relative;
top: 100px;
left: 100px;
}
一般情况我们使用该属性的原因不是因为要改变元素位置,而是为了保证内部的元素基于该元素进行绝对定位
absoulte 绝对定位
- top
- left
- right
- bottom
绝对定位就是直接把元素按照设置的上下左右的值,放在对应的元素的某个位置。
绝对定位会脱离文档流,盖在其他元素的上方。脱离文档流后,不管如何改变位置,都不会影响到布局。
absoulte默认情况下基于html定位,当网页出现滚动条时,absolute会跟着滚动。如果我们想要限制absolute绝对定位的区域,则给祖先元素种任意一个元素添加定位属性
fixed 固定定位
我们使用固定定位,可以实现网页上某个内容一直展示在窗口对应位置的效果:回到顶部、元素垂直水平居中、遮罩
- top
- left
- right
- bottom
sticky(粘性定位)
IE浏览器不支持
position: sticky
当某元素滚动到距离对应方向为设置的值时,会直接表现为固定定位的效果,如果不到对应的值,则没有任何定位效果。如果粘性定位生效,原位置继续占位,不会影响布局
z-index 层级关系
默认情况下,所有的层级都为0,先定位的在下面,如果设置的值大于0,则层级放在上面
z-index只能添加到定位元素上
选择器 {
position: xxx;
z-index: 1;
}