WEB元素定位 , 为何一般将absolute元素的父元素设为relative

曲奇饼

css div中定位右下角为何需要父的position为relative

1.   <!--HTML代码-->
   
2. <div class="A">
   
3.   <div class="B"> 我是b </div>
   
4. </div>
   

复制代码

1.   /*css代码*/
   
2. *{ padding:0; margin:0;}
   
3. .A{ position:relative; width:400px; height:400px; border:1px solid #000;}
   
4. .B{ position:absolute; right:0px; bottom:...
   

复制代码

这两个是配合使用的，A定义了relative后，B就会相对于A进行移动。

其实绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，这句话里有两个关键，

一个是“离它最近的祖先元素”，意思是那个参照元素不一定是父元素，也可以是它的爷爷、爷爷的爷爷等等，如果它的祖先里同时有2个及以上的定位元素，就参照离它最近的一个元素定位

还有一个是“已定位”，这个定位也不一定非要是相对定位，也可以是绝对定位，为什么一般都是用相对定位呢，因为相对定位的特性是虽然它定位了，就算给了偏移量它离开了原来的地方，但是它原来占的地方也不会让出来的，这样的好处是原来在它周围的其他元素不会因为它的离开而改变位置而使页面乱套，因为在你这个例子里我们只是要让A作为B的一个参照偏移位置，并不需要A元素以及它周围的元素有所改变，所以用相对定位是非常合适的（如果你另有其他需要，祖先元素绝对定位也不是不可以）