html中fixed属性,CSS中Fixed的属性

css中常见的布局问题中定位是比较难懂的一个点

比如relative和absolute定位

fixed定位与relative的关系

下面这个小demo演示一下fixed与父级子级同级的效果展示

这三个div都是【fixed】属性,但你会发现父级的zindex这时压根没盖过子级的z-index

同级的情况下是会被遮罩住的。

fixed

body {

min-height: 1500px;

font-size: 20px;

}

.rel {

position: fixed;

top: 120px;

background: #f50;

width: 600px;

height: 200px;

z-index: 10008;

text-align: right;

color: #fff;

padding: 10px;

}

.fixed {

position: fixed;

top: 100px;

left: 100px;

width: 200px;

height: 200px;

background: green;

z-index: 9;

color: #fff;

padding: 10px;

}

.other {

position: fixed;

top: 150px;

left: 50px;

background: #000;

width: 200px;

height: 200px;

z-index: 10008;

text-align: right;

color: #fff;

padding: 10px;

}

父级：fixed z-index:18

子级：fixed z-index:9

橙色同级：fixed z-index:10008