Question

我有一个div'A'，其中我设置了overflow: auto。现在在div中，我有两个div：父div B设置为position: relative，子div C设为position: absolute，

现在的问题是，在div A上设置overflow: auto会使div C消失。

我创建了fiddle，可以帮助您解释我的问题。

<body style="float:right">

<div id="A" style="overflow:auto;max-height:100px;width:200px;text-align:right">
<div id="B" style="position:relative">A TEXT

<div id="C" style="position:absolute;left:-200px;width:200px;background-color:grey">
  <div id="D">THIS TEXT IS GETTING DISAPPEARED after setting the overflow:auto on the parent DIV with id="A"
  </div><!-- End of DIV with id="D" -->

 </div><!-- End of DIV with id="C" -->

 </div><!-- End of DIV with id="B" -->



 </div><!-- End of DIV with id="A" -->


 </body>

不确定为什么会这样，任何帮助都非常有用

Answer 1

它并没有消失。它被父母的边缘切断了。我编辑你的小提琴来证明： https://jsfiddle.net/4ruoxdwh/5/

由于您在DIV A上设置了width和max-height，因此设置overflow:auto会裁剪除这些边界之外的任何内容。在上面的小提琴中，我设置了背景颜色并添加了一些填充，以便您可以看到它发生。

注意右侧的滚动条。如果您的孩子不符合您设定的尺寸，您必须重新考虑您的界限，或使用overflow:visible。

此外，为了将来参考，如果您将HTML和CSS分开并使用适当的缩进，它将使您和其他所有人的调试变得更加容易。

HTML

<body>

<div id="A">
  <div id="B">A TEXT
    <div id="C">
      <div id="D">
        THIS TEXT IS GETTING DISAPPEARED after setting the overflow:auto on the parent DIV with id="A"
      </div><!-- End of DIV with id="D" -->
    </div><!-- End of DIV with id="C" -->
  </div><!-- End of DIV with id="B" -->
</div><!-- End of DIV with id="A" -->

</body>

CSS

body {
  float: right;
}

#A {
  max-height:100px;
  width:200px;
  text-align:right;
  padding: 2em;
  background: yellow;
  overflow: visible;
}

#B {
  position:relative;
  background: red;
}

#C {
  padding: 2em;
  position:absolute;
  left:-200px;
  width:200px;
  background-color:green;
}

#D {
  background: cyan;
}

Answer 2

也许你在这里看到为什么它消失了......看看你的div #A ......我给了它一个边框，这样你就可以看到它的可见区域。

body {
    float: right;
}

#A {
    /* overflow: auto; */
    max-height: 100px;
    width: 200px;
    text-align: right;
    border: 1px solid red;
}

#B {
    position: relative;
}

#C {
    position:absolute;
    left: -200px;
    width: 200px;
    background-color: grey;
}

#D {
    
}

<div id="A">

    <div id="B">A TEXT

        <div id="C">
        
          <div id="D">
              THIS TEXT IS GETTING DISAPPEARED after setting the overflow:auto on the parent DIV with id="A"
          </div><!-- End of DIV with id="D" -->
          
        </div><!-- End of DIV with id="C" -->

    </div><!-- End of DIV with id="B" -->

</div><!-- End of DIV with id="A" -->

溢出：auto导致子DIV的绝对元素消失

2 个答案: