CSS position:absolute全面了解
CSS中的定位（positioning）属性可以让我们控制HTML元素在网页中的位置。其中position:absolute是一种常用的定位属性，它可以让元素脱离文档流，并相对于包含它的父元素或整个文档进行定位。
常用属性
position:absolute的使用需要搭配以下属性：
left- 元素左侧与父元素的距离top- 元素顶部与父元素的距离right- 元素右侧与父元素的距离bottom- 元素底部与父元素的距离
这些属性可以用像素或百分比等单位进行设置。
例子1
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
position: relative;
width: 300px;
height: 200px;
background-color: #f2f2f2;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #b3dced;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我被居中了</div>
</div>
</body>
</html>
在上述例子中，我们创建了一个父元素.parent和一个子元素.child。我们为.parent设置了position: relative，这意味着.child的位置会相对于.parent进行定位。子元素.child被设置为position: absolute，同时也设置了left:50%和top:50%，这使得它的左上角坐标定位在它父元素的中心位置。
为了让子元素.child水平居中，我们使用了transform: translate(-50%, -50%)属性，它的参数表示相对于子元素自身的偏移量。这样，子元素.child就被完美地居中了。
例子2
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
position: relative;
width: 250px;
height: 250px;
background-color: #f2f2f2;
}
.child {
position: absolute;
right: 10px;
bottom: 10px;
width: 50px;
height: 50px;
background-color: #b3dced;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
在上述例子中，.child元素被按照它与它父元素右侧和底部的距离进行定位，它的右侧距离父元素的右侧10个像素，底部距离父元素底部也是10个像素。这使得.child元素被定位在整个父元素的右下角。
总结
position:absolute是CSS中非常有用的定位属性。当我们需要对某些元素进行自由定位或浮动时，可以使用它来实现。在使用这种属性时，我们可以设置元素的左右上下距离，并掌握好其它相关属性，以便让元素达到我们想要的位置。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS position:absolute全面了解 - Python技术站
微信扫一扫 
支付宝扫一扫 