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

发布网友发布时间：2022-04-24 22:28

共4个回答

热心网友时间：2022-04-21 12:39

css div中定位右下角需要父的position为relative的原因是一般我们是相对一个DIV或者说是一个元素来定位，如果你不加的话，那就先对浏览器的左上角定位，效果是完全不同的，这里通过代码来理解:
<html>
<head>
<style>
.headr{
width:300px;
height:200px;
border:1px solid #f00;
position:relative;

}
.wenzi{
width:200px;
height:100px;
position:relative; //这样来写的css的我们通过的就不会是在浏览器的左上角，而是div的左上角
left:0px;
top:0px;
border:1px solid #f00;
}

</head>
<body>
<div class="headr" > //页头
<div class='wenzi'>
<p>我的数据</p>
</div>
</div>

</body>
</html>

热心网友时间：2022-04-21 13:57

哈哈，对这个有疑问吗？

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

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

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

热心网友时间：2022-04-21 15:31

因为你设置为absolute之后，就会脱离原来的流，在网页中是不占位置的，而且是相对于浏览器来设置位置，只有设置绝对定位的父亲设置了相对定位，才会相对于父亲div来偏移位置。追问如果我希望父div在网页中绝对定位，然后子div在父的div中，定位到相对于父div的一个位置（即以父div的左上角为坐标原点）。

感谢！

热心网友时间：2022-04-21 17:23

这两个是配合使用的，A定义了relative后，B就会相对于A进行移动。
你上边的效果肯定是A是一个大块，然后B是一个小块，B的位置是在A元素里边的最右边和最下边。
这就是B相对于A进行移动的效果，