css
中的定位有五种方式,分别是静态定位、相对定位、绝对定位、固定定位和粘性定位。它们搭配偏移属性top/right/bottom/left
和层叠定位属性z-index
一起使用。
元素的五种定位方式
(1)静态定位 static
静态定位是元素的默认定位方式,几乎不使用。
position:static;
(2)相对定位 relative
相对定位是元素在移动位置的时候,是相对于它自己原来的位置来说的,正常显示,但会保留原来的占有空间。
position:relative;
实例:
<head>
<style>
div{
width: 100px;
height: 100px;
display: inline-block;
background-color: skyblue;
}
.rel{
color: red;
position: relative;
right: 10px;
top: 10px;
}
</style>
</head>
<body>
<div class="ref1">参照 1</div>
<div class="rel">相对定位</div>
<div class="ref2">参照 2
<p class="abs">绝对定位</p>
</div>
</body>
效果:
图中相对定位偏移后,原来占有的空间保留。
(3)绝对定位 absolute
绝对定位使元素独立显示,呈现“漂浮”状态,脱离标准流不保留占有空间。定位参照父元素(最近的祖先元素),一般设置父元素为相对定位position:relative;
保证网页正常显示。
position:absolute;
实例:
.ref2{ position: relative;}
.abs{
width:50px;
height:50px;
background-color: green;
position: absolute;
top:25px;
left:25px;
}
效果:
(4)固定定位 fixed
以浏览器的可视窗口为参照点移动元素,跟父元素没有任何关系,不随滚动条滚动。脱标。通常用于导航栏、置顶。
position:fixed;
(5)粘性定位 sticky
position:sticky;
层叠定位属性 z-index
z-index
只有在使用position
时才能使用。用于调整层叠位置。
z-index:666;