好久没有看前端,最近又复习了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>
结果: