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?

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>
温馨提示:内容为网友见解,仅供参考
第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 div中定位右下角为何需要父的position为relative
css div中定位右下角需要父的position为relative的原因是一般我们是相对一个DIV或者说是一个元素来定位,如果你不加的话,那就先对浏览器的左上角定位,效果是完全不同的,这里通过代码来理解:<html> <head> <style> .headr{ width:300px;height:200px;border:1px solid #f00;position:relative;...

CSS样式中如何理解绝对定位和相对定位?
相对定位,则是以上一级父级元素为基准来定位.. 所以子div相对父div的定位用什么当然就要用 position:relative--相对定位了..margin表示 与上一级元素的上下左右之间留多少空间,如果是在相对定位中,用margin代替也可以,但是,margin的属性值在各个浏览器中是有差异的,所以为了兼容性,最还是用 position:re...

html中div标签的relative属性是怎么用的,老搞不懂,请高手指点
relative 应该是 CSS 中 position 属性的一个值吧,用Div+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。Position属性有四个值:static、fixed、absolute和relative,后面两个在布局中的定位里是经常用到的,顾名思义,absolute是指绝对定位,即将对象从文...

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

div style="position:relative"是相对谁的位置,大概怎么用,用负值会不...
position:relative就是相对定位,它相对于原有位置移动,但是,他移动了以后,他的以前的位置的空依然存在;用法:div{position:relative;top:20px;left:30px} 意思就是那个盒子相对于原有的位置移动(向下移动20px;向右移动30px)position:absolute就是绝对定位,它相对于父元素进行定位,他不占原有位置...

CSS里面position:relative与position:a别
position:absolute是一种绝对定位,这种定位方式使元素相对于浏览器窗口进行定位,例如,"position:absolute;left:20px;top:80px"会让元素固定在距离浏览器左侧20像素,上边缘80像素的位置,不受其父元素影响。相对定位则通过position:relative实现,这种情况下,元素会相对于其最近的已定位祖先元素进行定位,...

在css中position:relative是什么意思?
一、相对定位的基本概念 在CSS中,`position: relative`是一种定位方式,它允许元素相对于其在文档流中的原始位置进行移动。这意味着即使元素被移动了,其原来的空间也会被保留下来,不会被其他元素填补。这对于创建一些特殊的布局和动画效果非常有用。二、相对定位与正常文档流的对比 当一个元素的`...

css div中定位右下角
1、首先我不给div定位来看看两个div在浏览器中是如何显示的,具体的代码如下:如下图,可以看到两个div在没使用定位的情况下显示的位置,我们可以发现div是个块,自动换行了。2、相对定位:首先给div2使用相对定位,用position:relative;来实现的,具体的代码如下:可以看到如下图,div2的位置离div1的...

在css中position:relative是什么意思?
一、`position: relative`的基本含义 当我们在CSS中为元素设置`position: relative`时,该元素会相对于其正常位置进行定位。这意味着,即使元素设置了`relative`定位,它仍然会保留其在文档流中的空间,就好像它仍然处于正常位置一样。因此,其他元素在布局时仍会考虑到这个元素原本所占的空间。这对于调整...

div中的相对定位与绝对定位
正确的解决方法就是在元素的父级元素定义为position:relative;(更正:这里可以是祖父级,也可以是position:absolute;)需要绝对定位的元素设为position:absolute;这样再设定top,right,bottom,left的值就可以了,这样其定位的参照标准就是父级的左上角padding的左上侧!***CSS单元的位置和层次-div标签 我们都知道,在网页上...

相似回答