CSS中的相对定位和绝对定位

来源：互联网发布：知乎陈毅编辑：程序博客网时间：2024/06/05 09:46

相对定位
在CSS中，我们可以将position属性的值设置成relative来对元素进行相对定位。如果对某元素设置了相对定位，那么该元素仍然会出现在标准文档流中它原本的位置。然后我们可以通过设置left、top等属性，让这个元素以它原来的位置为参照物进行移动。只要position属性的值为relative，无论是否对该元素进行移动，元素仍然占有原来的空间。因此，使用相对定位移动元素会使它覆盖其他框。
绝对定位
将position属性的值设置为absolute可以对元素进行绝对定位。使用了绝对定位的元素被从标准文档流中移除，即不占用原来的空间，并且该元素会相对于最近的已经定位的祖先元素进行定位，如果该元素没有已定位的祖先元素，那么它就会相对于其最外层的祖先元素进行定位。
简单来说，相对定位是“相对于”元素在文档中的初始位置；而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么就“相对于”最初的包含块。
实例

<!DOCTYPE html><html><head>    <title>CSS中的相对定位和绝对定位</title>    <style type="text/css">        body {            background-color: pink;        }        div {            width: 200px;            height: 100px;        }        .boxes {            height: 300px;            border: 3px solid black;        }        .box1 {            background-color: red;        }        .box2 {            background-color: green;        }        .box3 {            background-color: blue;        }    </style></head><body>    <div class="boxes">        <div class="box1">            111        </div>        <div class="box2">            222        </div>        <div class="box3">            333        </div>    </div></body></html>

上述代码的运行结果如下图所示：
这里写图片描述
然后，我们对class为box2的div元素使用相对定位

.box2 {            position: relative;            left: 100px;            top: 50px;            background-color: green;        }

结果如下图：
这里写图片描述
可以看出，使用相对定位后，该元素相对于它的初始位置向下移动了50px，向右移动了100px，并且将class为box3的div元素覆盖了。然后我们直接对class为box2的div元素使用绝对定位，代码只需要将position:relative;改为position:absolute;就可以了。运行结果如下：
这里写图片描述
可以看出，class为box2的div元素相对于body元素向下移动了50px，向右移动了100px。并且它脱离了标准文档流，class为box3的div元素占据了它原来的位置。然后，我们把class为boxes的div元素设置成相对定位，把class为box2的div元素设置成绝对定位，看一下有什么效果。
代码：

.boxes {            position: relative;            top: 100px ;            height: 300px;            border: 3px solid black;        } .box2 {            position: absolute;            left: 100px;            top: 50px;            background-color: green;        }

可见，class为boxes的div元素相对于它之前的位置向下移动了100px，而class为box2的div元素相对于它的父元素（即class为boxes的div元素）向下移动了50px，向左移动了100px。
这里写图片描述

阅读全文

0 0