html - 溢出隐藏的 div 将内容向右移动

Question

我有两次潜水。一个在另一个里面。父级有 overlow: hidden; 和一些额外的样式:

.parent {
    width: 800px;
    opacity: 0;
    display: inline-block;
    top: 49%;
    position: relative;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    direction: ltr;
    overflow: hidden;
}

有一个 child 是这样的:

.child {
    width: 5000px;
    position: relative;
}

所以，我的问题是非常宽的 child 正在完全向右移动，就像这样:

为什么会这样，它应该像这样在父 div 中从左到右:

问题出在哪里？有人可以帮忙吗？

Answer 1

您的 css 属性可能太多了。实际上，您的 parent 有 2 个不同的位置属性。

 <style>
 .parent {
    width:400px;
    height:200px;
    background-color:#0000FF;
    overlow: hidden;
 }
 .child {
    width:600px;
    height:100px;
    background-color:#FF0000;
 }
 </style>

 <div class="parent">text
    <div class="child">text</div>
 </div>

尽量保持简单。