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

来源：互联网发布：cydia刷新软件源报错编辑：程序博客网时间：2024/06/18 16:34

好久没有看前端，最近又复习了HTML+CSS的部分内容，发现没有写相对定位和绝对定位的初级认识，特此补充。。。

以一个简单的栗子来初步了解相对定位和绝对定位。

<html><head><title></title><meta http- ="Content-Type" content="text/html; charset=utf-8"><style>.div1 {border:1px solid #666;width:200px;position: relative;left:100px;}</style></head><body><p>段落一</p><p>段落二</p><div class="div1">  <div>段落三</div></div><p>段落四</p></body></html>

上述栗子在几个p中加入了一个父级div，其中又包含了一个子级div，父元素设置为相对定位，子元素正常。

结果：

上述结果表明子元素要跟随父元素的移动而移动，并且相对移动的元素虽然从文档流中移出，但是原来的位置不被占用。

换个思路，如果要求子元素还是移动到对应位置，但是把空白位置填补起来，应该怎么做？

<html><head><title></title><meta http- ="Content-Type" content="text/html; charset=utf-8"><style>.div1 {border:1px solid #666;width:200px;position: relative;left:100px;}.div2{position:absolute;}</style></head><body><p>段落一</p><p>段落二</p><div class="div1">  <div class="div2">段落三</div></div><p>段落四</p></body></html>

结果：

如果要使文档原来的位置被填补，那么我们就要相对位置和绝对位置一起使用，对子元素使用绝对定位，这时子元素就从原来的父元素中脱离，并且子元素没有移动，就出现在原位置，可以发现父元素中已经不包含子元素了，那么原来的父元素应该存在的位置（即段落二和段落四之间）就没有段落三的位置了（段落三脱离了它的父元素了），这时把原来的父元素的边框显示（边框还是占据空间的）去掉就可以达到填补空白的效果。

说明绝对定位的元素从原文档中脱离了，并且原来的位置也会不复存在。

去掉边框代码：

<html><head><title></title><meta http- ="Content-Type" content="text/html; charset=utf-8"><style>.div1 {position: relative;left:100px;}.div2{position:absolute;}</style></head><body><p>段落一</p><p>段落二</p><div class="div1">  <div class="div2">段落三</div></div><p>段落四</p></body></html>

结果：

阅读全文

0 0