关于定位position
relative 相对定位,相对于其源文档流的位置进行定位 不脱离文档流
absolute 绝对定位,相对于其上一个已经定位的父元素进行定位、 脱离文档流
fixed 固定定位,相对于浏览器的窗口进行定位 脱离文档流
position:
取值:static 默认,静态(默认文档流定位)
relative 相对定位
absolute 绝对定位
fixed 固定定位
当一个元素被position修饰,并且取值为
relative/absolute/fixed其中一种时,
那么这个元素被称为已定位元素
定位要配合偏移属性使用
当一个元素有position属性,并取值为relative/absolute/fixed
那么这个元素就解锁4个偏移属性,元素距离(方向)有多少px
top: +往下 -往上
right: +往左 -往右
bottom: +往上 -往下
left:+往右 -往左
相对谁定位,相对自己原来位置偏移某个距离
position:relative;配合4个偏移属性使用
特点:1.不脱离文档流
2.相对定位,如果不写偏移量,效果与没写定位是一样的。不影响任何布局(为了绝对定位做准备)
使用场合:
1.自身元素位置的微调
2.作为绝对定位子元素的已定位祖先级元素
2.绝对定位
position:absolute;配合偏移属性应用 特点:1.绝对定位的元素会相对于,离自己"最近的""已定位的""祖先元素",去实现位置的初始化 如果没有已定位的祖先元素,相对于body去实现位置的初始化 2.绝对定位,是脱离文档流的,不占据页面空间,后面元素会上前补位。 3.绝对定位的元素,会变成块级元素 |
3.固定定位
position:fixed;配合偏移量使用 将元素固定在页面上的某个位置,不会随着滚动条发生位置变化,一致固定在可视区域 特点:脱离文档流,位置相对于body初始化 元素不占页面空间 后续元素上前补位 元素变为块级 |
4.堆叠顺序
1.定位的脱离文档流和浮动的脱离文档流不是一个体系 2.默认,后定位的元素,堆叠顺序高 3.设置堆叠顺序 z-index:无单位数字 4.堆叠顺序对父子级无效,儿子永远在父亲的上面 5.只有已定位元素,有堆叠顺序 |