探索为什么相对定位的元素的父辈元素一定要设为position:relative
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相对参照元素进行定位</title>
<style type="text/css">
div{border:2px red solid;}
#box1{
width:200px;
height:200px;
position:relative;
}
#box2{
position:absolute;
top:20px;
left:30px;
}
/*下面是任务部分*/
#box3{
width:200px;
height:200px;
position:absolute;
}
#box4{
width:99%;
position:absolute;
bottom:0;
}
/*下面是观察部分*/
#box5{
width:200px;
height:200px;
position:absolute;
}
#box6{
position:absolute;
top:20px;
left:30px;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">相对参照元素进行定位</div>
</div>
<h1>下面是任务部分</h1>
<div id="box3">
<img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">
<div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>
</div>
<br/><br/>
<h2>下面是观察部分</h2>
<div id="box5">
<div id="box6">相对参照元素进行定位</div>
</div>
</body>
</html>
结果图:
我试过将设置定位的元素及其父辈元素都设定为absolute,如图所示，她们与其他父辈的兄弟元素不会重叠，于是我就以为可以这样组合。但是，当我把box3和box4都设为absolute时,任务部分与观察部分就重叠起来，所以用relative去设置父辈元素，是为了避免这种情况出现，其实我的理解是，只有定位脱离了文档流，那么后面元素的定位就会收到影响，不知道我这样的理解对不对
qq_人生是一场修行_031887874回答
-
blovetu
其实绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，这句话里有两个关键，一个是“离它最近的祖先元素”，意思是那个参照元素不一定是父元素，也可以是它的爷爷、爷爷的爷爷等等，如果它的祖先里同时有2个及以上的定位元素，就参照离它最近的一个元素定位还有一个是“已定位”，这个定位也不一定非要是相对定位，也可以是绝对定位，为什么一般都是用相对定位呢，因为相对定位的特性是虽然它定位了，就算给了偏移量它离开了原来的地方，但是它原来占的地方也不会让出来的，这样的好处是原来在它周围的其他元素不会因为它的离开而改变位置而使页面乱套，所以用相对定位是非常合适的（如果你另有其他需要，祖先元素绝对定位也不是不可以） -
weibo_有土有木木木木_03146994
理解是对的,相对定位和绝对定位的区别就是一个是脱离了文档流,一个没有脱离文档流,相对定位是相对于自身定位,而绝对定位是相对于自身的最近的父辈有绝对定位或相对定位的元素进行定位.,要是父辈都没有绝对定位或者相对定位,就会相对于根元素进行(body,html)进行定位..当父级设置了绝对定位之后,子级的绝对定位也会受父级绝对定位的影响..所以一般为了让父级元素不懂,一帮都用父级元素进行相对定位,所以你的理解是正确的. -
慕客学渣会总瓢把子3201537
后面元素会受到影响。但是后面元素的定位受到到影响。我不知道怎么理解你。其实你多做做多看看就知道了。我一开始也不是特别明白。用relative，absolute去设置父辈元素时，它的子元素设置absolute时就是相对父元素偏移，下面针对你的问题一一分析吧。1“我试过将设置定位的元素及其父辈元素都设定为absolute,如图所示，她们与其他父辈的兄弟元素不会重叠”父辈absolute，子元素absolute，子元素是相对已经定位的父元素定位。只要父元素有定位属性，子元素absolute都会相对父元素定位，如果父元素没有定位属性，则子元素absolute相对html（也就是可视窗口）定位。2“当我把box3和box4都设为absolute时,任务部分与观察部分就重叠起来”如果他们的父级没有定位，则他们是相对窗口也即使html定位的。若位移距离一样就会重叠（看不到你的html代码。不好说）3“只有定位脱离了文档流，那么后面元素的定位就会收到影响”搞清楚他们相对定位的关系。就OK了。不存在这个东东。如果他们都是absolute属性，并且把位移距离都设置0。四个会重叠在一起。因为他们都是相对HTML定位的。最好把代码都贴出来。这个定位关系你去网上搜搜吧。弄懂就OK了。多做做，多实验。希望能帮到你。哈哈。头都大了，看不见你的HTML代码。本来不想回答了。可是打了这么多字。不忍心。 -
ahao430
理解是对的。absolute会脱离文档流，而relative不会。你把box3和box4都设成absolute，整个任务部分不占据文档流，下面的观察部分挤上来了，所以重叠在一起。而box3设置成relative，就会依然占据文档流位置。而同样脱离文档流，float元素却会依然占据父元素中的位置，对兄弟元素造成影响。但他实际上已经脱离文档流了，不会撑起父元素高度，这个要注意。absolute一般和relative配合使用，但是也可单独使用。对box3不作处理，单独对box4设置absolute，box4会脱离文档流，但位置还是原来的位置。这时可以用margin来移动box4的位置。如果用top，left，就会向上查找relative，找不到就相对于body定位。关于这些，建议看看慕课上张鑫旭大神的css深入理解系列课程，看完会很有收获。
随时随地看视频慕课网APP
CSS3
Html/CSS