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

Question

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

Answer 1

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

<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有没有高度无关

Answer 2

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

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

追答

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

追问

我做的是自适应的

本回答被网友采纳

Answer 3

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

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

追答

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

追问

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

追答

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

本回答被提问者采纳