相对定位(relative)
当对一个元素设置相对定位之后,便可以设定属性值来调整该元素在四个方向的偏移量。
代码如下:
<style>
div{
width: 500px;
height: 500px;
background-color: yellow;
position: relative;
top:200px;
left: 200px;
}
</style>
<body>
<div>
</div>
</body>
使用position: relative来设置相对定位属性。
上图中定义了
top:200px; left: 200px;
分别代表向下偏移200像素,向右偏移200像素。
以下是属性表
属性(单位为px) | 属性描述 |
top | 向下偏移 |
bottom | 向上偏移 |
left | 向右偏移 |
right | 向左偏移 |
相对定位虽然视觉上移动了元素的位置,但元素原本在文档流中的位置并未改变。
绝对定位(absolute)
首先绝对定位是脱离了标准文档流的,它跟相对定位的区别在于它们的属性值不同了。
属性(单位为px) | 属性描述 |
top | 与父级元素上方的距离 |
bottom | 与父级元素下方的距离 |
left | 与父级元素左方的距离 |
right | 与父级元素右方的距离 |
代码示例:
<style>
.relat{
width: 500px;
height: 500px;
background-color: yellow;
position: absolute;
bottom: 200px;
right: 200px;
}
.absolu{
width: 200px;
height: 200px;
background-color: green;
position:absolute;
bottom: 70px;
}
</style>
<body>
<div class="relat">
<div class="absolu">
</div>
</div>
</body>
可以看到属性值是各个方向的距离,并且是以父元素为基准。
固定定位(fixed)
固定定位也脱离了标准文档流,它的应用场景一般是导航栏或者工具栏,随着页面的拖动它的位置并不会变动。
示例代码:
<style>
*{
padding: 0;
margin: 0;
}
.box{
font-size: 50px;
text-align: center;
background-color: aliceblue;
top: 0 ;
position: fixed; /* 固定定位 */
width: 100%;
height: 103px;
border-bottom: 4px solid red;
}
.div1{
height: 300px;
background-color: blue;
}
.div2{
height: 300px;
background-color: red;
}
.div3{
height: 300px;
background-color: green;
}
</style>
<body>
<div class="box">
导航栏
</div>
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
</body>
属性值使用同绝对定位。