CSS中的定位是指如何让HTML中的元素出现在页面上的具体位置。在CSS中，有两种主要的定位方式：absolute和relative。
- absolute定位：绝对定位，使元素相对于最近的非static（默认）定位的父元素进行定位。如果没有找到对应的非static定位元素，则以body元素为参考定位元素。这意味着即使页面滚动，元素也将保持在原始位置。
示例代码：
<style>
.container {
position: relative; /* 父元素需要设置为relative */
}
.box {
position: absolute;
top:10px;
left:10px;
}
</style>
<body>
<div class="container">
<div class="box">我是绝对定位元素</div>
</div>
</body>
在这个示例中，父元素container设置了相对定位，然后内部的box元素通过设置绝对定位，并通过top和left属性指定了相对于父元素的偏移量。这使得box元素相对于container元素定位，并且始终保持在其原始位置，即使页面滚动。
- relative定位：相对定位，使元素相对于其初始位置进行定位。这意味着即使页面滚动，元素也将相对于其初始位置进行移动。
示例代码：
<style>
.box {
position: relative;
top:10px;
left:10px;
}
</style>
<body>
<div class="box">我是相对定位元素</div>
</body>
在这个示例中，box元素设置了相对定位，并通过top和left属性指定了相对于其初始位置的偏移量。这使得box元素相对于其初始位置定位，并且始终相对于其初始位置进行移动，即使页面滚动。
总结来说，absolute定位适用于需要在页面上精确定位的元素，并希望它们保持在原始位置，而relative定位适用于需要相对于其初始位置移动的元素。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：css中定位中的absolute和relative是什么意思 - Python技术站
微信扫一扫 
支付宝扫一扫 