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

HTML代码

<div class="A">
<div class="B">
我是b
</div>
</div>

css代码：
*{ padding:0; margin:0;}
.A{ position:relative; width:400px; height:400px; border:1px solid #000;}
.B{ position:absolute; right:0px; bottom:0px; width:100px; height:100px; background-color:red;}

上面是友给的解答，为何父div的position属性必须为relative，子div属性为absolute？

举报该问题

推荐答案推荐于2016-09-04

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>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://66.wendadaohang.com/zd/svnixUxDp.html

其他回答

第1个回答推荐于2018-03-02

哈哈，对这个有疑问吗？

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

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

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

第2个回答 2013-09-14

因为你设置为absolute之后，就会脱离原来的流，在网页中是不占位置的，而且是相对于浏览器来设置位置，只有设置绝对定位的父亲设置了相对定位，才会相对于父亲div来偏移位置。追问

如果我希望父div在网页中绝对定位，然后子div在父的div中，定位到相对于父div的一个位置（即以父div的左上角为坐标原点）。

感谢！

第3个回答 2013-09-14

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

第4个回答 2020-12-26

Vue实践-CSS样式position/display/float属性对比使用

相似回答

在CSS中position: relative是什么意思?答：在CSS中，“position: relative”是设置定位类型为相对定位，它可以配合“top”、“bottom”、“left”、“right”这4个偏移量来实现相对它所属父元素的相对定位。position属性规定元素的定位类型，这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论...

内层的一个DIVposition:absolute; 外层一个为什么要position:relative...答：如果你外层不加position:relative的话，DIVposition:absolute的TOP和LEFT就根据整个网页来定位了。relative的意思是相对，也就是说里面的元素是相对于该元素来定位的。CSS权威指南，一本专业的CSS手册，但里面没有太多的技术，只有一些思想。

div+css中 父容器用position:relative; 定义,子容器用position:absolute...答：绝对定位（position:absolute;）使元素的位置与文档流无关，因此不占据空间。设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。要子容器自适应高度，就不能用position:absolute; 你可以用相对定位（position:relative;...

css代码中position的定位relative absolute static不知道怎么用,搞不懂...答：如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。在Position属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。

...来定位,要在a元素的CSS中加入position:relative; ?答：既然是 b元素相对于 a元素来定位如果你不给 a元素加上 position: relative; 的话，则 b元素相对的不是 a，而是相对整个页面在定位。你讲的其实是：相对定位嵌套绝对定位，条件是元素有嵌套父子关系：1. a元素为父元素，b元素为子元素 2. a元素相对定位，b元素绝对定位比如说下面结构，a是...

CSS样式中如何理解绝对定位和相对定位?答：绝对定位表示不管是几级元素,都以浏览器上边框(top),左边框(left),右边框(right),下边框(bottom)来定位..相对定位,则是以上一级父级元素为基准来定位.. 所以子div相对父div的定位用什么当然就要用 position:relative--相对定位了..margin表示与上一级元素的上下左右之间留多少空间,如果是在相对定位...