CSS绝对定位和相对定位 position: absolute/relative

最新推荐文章于 2025-06-07 20:47:06 发布

weixin_34343308

最新推荐文章于 2025-06-07 20:47:06 发布

阅读量71

点赞数

本文详细解析了CSS中的两种重要定位方式：绝对定位（absolute）与相对定位（relative）。介绍了这两种定位方式的基本概念及其如何影响页面布局，并通过具体示例展示了如何在实际应用中正确使用它们。

absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute属性.

relative(相对定位): 对象会保持在HTML文档流中,对象原本占有的空间不会被覆盖,对象根据前一个对象进行位子偏移.

1.单独设置对象的absolute属性和top,left,right,bottom属性,对象定位方式是以body对象为基准进行偏移的.

<style type="text/css">
            div{
                background-color: #ff6a00;
                width: 20px;
                height: 20px;
                position: absolute; 
                top: 0px;
            }
</style>
<div></div>

2.绝对定位(absolute)和相对定位(relative)配合使用.我们经常需要在父对象的基础上进行偏移,这样单独使用absolute就无法达到目标.

需要在父对象中使用相对定位,子对象里面使用绝对定位,父对象不一定是指子对象的直接父对象.

<style type="text/css">
            #box{
                position: relative;
                background-color: #808080;
                height: 20px;
            }
            #con{
                position: absolute;
                top: 5px;
                left: 5px;
                width: 10px;
                height: 10px;
                background-color: #ff6a00;
            }
</style>
<div id="box">
       <div id="con"></div>
</div>