我的父级元素div用了相对定位，儿子元素div用了相对定位，为啥孙子元素div用了绝对定位不行了？

Posted 2023-04-10

孙子元素top失效，margin-top才可以。这是为啥呢

参考技术A

应该是你代码写错了，试试下面这个。

<div style="width: 300px; height: 300px;border:1px solid #f00;position: relative;">
            <div style="width: 200px; height: 200px; margin:50px;border:1px solid #f00;position: relative;">
                <div style="width: 100px; height: 100px;border:1px solid #f00;position: absolute; top: 10px;">
                    
                </div>
            </div>
        </div>

追问

我想用百分比来设置。你这个我试过了没有问题。但是换成孙子元素用top:20%就会失效

追答

没有失效啊，你代码是不是有问题呢，父和子都是position：relative；对吗？

蓝框就是20%

追问

我刚才看了一下。我的父亲div没有设置高度。孙子div绝对定位后top就失效了。用margin-top就可以，为什么呢

追答

是的，你不设置高度那么就是0，那你子div在设top值它还是0啊，而margin-top是设置外边距的和父div有没有高度无关

参考技术B 孙子的 top 是根据 父级来说的 如果你要孙子绝对定位 请把 爷爷和父亲的position:都设为 relative 这样才行
希望能帮到你 谢谢追问

我就是这样设定的。但是top会失效。不能用百分比，只能用比如top:50px;

追答

为何要用百分比？ 你看你的代码 用百分比的情况是 父级的宽度或者高度就是百分比 为了自适应 你的父级 div 高度宽度都是固定的 为何不能写px呢？ 不理解 100px的 20% 不是20px么？难道还有变化不成？

追问

我做的是自适应的

参考技术C 孙子元素是相对于儿子元素的定位吧。不然你把链接发出来看看追问

孙子元素是相对于儿子元素定的位。可以用top:20px;但是top:20%却会失效。但是我用margin-top:20%却又可以

追答

要不你把代码发出来或者url发出来也好让我们看一下。

追问

我刚才看了一下。我的父亲div没有设置高度。孙子div绝对定位后top就失效了。用margin-top就可以，为什么呢。我主要想做手机的。父级元素没有设置高度。孙子绝对定位下margin-top；有些手机会失效

追答

你这么说我知道问题所在了。
你这个儿子元素里有几个孙子元素？如果只有一个必定会出现你这个问题。因为这样的话子元素的高度是等于这个孙子元素的高度的。所以top是没用的，因为这陷入了一个循环。除非子元素设高度。
如果有好几个孙子元素，子元素随最高的那个孙子元素变化，只要这个孙子元素不是最高的就不会有问题。

本回答被提问者采纳

关于absolute 和 relative 定位的定义

absolute的英文意思是绝对的意思,实际上是针对父级元素元素定位,如果父级元素没有position:relative|absolute,则追至再上一个父级元素,直至相对于文档的左上角定位，按照我们中国人的理解观念，这个其实是相对定位，是脱离文档流的。用了abolute属性，原有float属性将失效；
relative的英文意思是相对的意思，实际上是相对于对象当前位置的定位。而且是不脱离文档流的，就算用top、lef、bottom、right或margin将其移动位置，它也会在原来的文档流中占有自己实际大小的一块位置。
说白了，absolute是相对于父对象定位，relative是相对于当前位置定位！就是这么简单