CSS Position: Absolute和Relative详解
在CSS中position属性用于定义元素的定位类型。在position属性中有四个值:static(默认)、relative、absolute 和 fixed。
本篇攻略将详细介绍position属性中的absolute和relative,帮助您更好地理解和应用这两个定位类型。
Relative相对定位
相对定位是相对于元素原来在文档流中的位置进行定位,与元素周围的其他元素位置不会发生影响。即位置变动不会对其他元素造成影响。
示例1:
<div class="container">
<div class="box1">Hello, how are you?</div>
<div class="box2">I'm fine, thank you.</div>
</div>
.container {
width: 300px;
height: 300px;
border: 1px solid black;
}
.box1 {
position: relative;
top: 50px;
left: 50px;
background-color: gray;
width: 200px;
height: 100px;
}
.box2 {
width: 100px;
height: 100px;
background-color: yellow;
}
上面代码中,我们通过position: relative;top: 50px;left: 50px;来将box1向下移动了50px,向右移动了50px,而box2没有发生位置变动。
示例2:
<div class="container">
<div class="box1">Hello, how are you?</div>
<div class="box2">I'm fine, thank you.</div>
</div>
.container {
width: 300px;
height: 300px;
border: 1px solid black;
}
.box1 {
position: relative;
top: 50px;
background-color: gray;
width: 200px;
height: 100px;
}
.box2 {
position: relative;
top: -50px;
left: 100px;
background-color: yellow;
width: 100px;
height: 100px;
}
上面代码中,我们通过position: relative;top: -50px;left: 100px;将box2向上移动了50px,向右移动了100px,而box1没有发生位置变动。
Absolute绝对定位
绝对定位是相对父元素(经过定位的元素)的位置进行定位。当父元素没有经过定位时,则相对于浏览器窗口定位。
示例1:
<div class="container">
<div class="box1">Hello, how are you?</div>
<div class="box2">I'm fine, thank you.</div>
</div>
.container {
width: 300px;
height: 300px;
border: 1px solid black;
position: relative;
}
.box1 {
position: absolute;
top: 50px;
left: 50px;
background-color: gray;
width: 200px;
height: 100px;
}
.box2 {
width: 100px;
height: 100px;
background-color: yellow;
}
上面代码中,我们通过position: absolute;top: 50px;left: 50px;让box1相对于父元素(container)的顶部和左侧各向下、向右跨越50px的距离。而box2没有发生位置变动。
示例2:
<div class="container">
<div class="box1">Hello, how are you?</div>
<div class="box2">I'm fine, thank you.</div>
</div>
.container {
width: 300px;
height: 300px;
border: 1px solid black;
position: relative;
}
.box1 {
position: absolute;
top: 50px;
background-color: gray;
width: 200px;
height: 100px;
}
.box2 {
position: absolute;
top: 30px;
left: 100px;
background-color: yellow;
width: 100px;
height: 100px;
}
上面代码中,我们通过position: absolute;top: 30px;left: 100px;让box2相对于父元素(container)的顶部向下跨越30px的距离,与之相邻的box1也随之向下移动。而box2还向右跨越100px的距离,因此其完全出现在box1的右边。
总结
通过上面的两组例子,我们可以看到相对定位仅仅是在元素的原有位置上进行移动(如上下左右移动),而绝对定位则是根据父元素的位置进行移动(如向下向右移动)。两者的使用场景不同,需要根据自己的需求进行选择。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:css position: absolute、relative详解 - Python技术站