css 定位属性介绍 |css实现弹窗周围暗黑效果

div{
position: relative;
left: 50px;
top: 100px;
}

如上代码中，大家使用了position属性来定义元素的定位方式，其中包括四个值：static、relative、absolute和fixed。默认值为static，表示元素在文档流中正常排列。relative表示元素相对自身的位置进行定位，通过left和top属性来控制元素距离原来的位置偏移，即上述代码中将元素向右移动了50像素，向下移动了100像素。absolute和fixed表示元素相对于其父元素或浏览器窗口进行定位。

div{
position: absolute;
top: 50px;
right: 0;
}

如上代码中，大家将元素相对于其父元素定位，通过top和right属性来控制元素距离父元素顶部和右侧的距离。而fixed则是将元素进行固定位置定位，不随浏览器滚动而移动。

除了以上定位属性外，大家还可以通过z-index来控制元素的层叠顺序，值越大的元素会被放置在越上方。

div{
position: relative;
z-index: 1;
}
img{
position: absolute;
z-index: 2;
}

如上代码中，大家将div元素的z-index设置为1，将img元素的z-index设置为2，因此img元素会被放置在div元素之上。

CSS的定位属性是网页布局中非常重要的一部分，正确地使用它们可以使网页排版更加灵活多样。