溢出隐藏的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 {
    width: 5000px;
    position: relative;
}

所以，我的问题是，非常宽的孩子正在向右移动，如下所示：

为什么它会发生，它应该在父div中从左到右保持这样：

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

Answer 1

你可能有太多的css属性。你的父母实际上有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>

尽量保持简单。

Answer 2

您在div父级中使用relative和absolute两倍的属性overflow。也许这是你的错误。或者，也许这就是你想要的：CodePen 您正在使用opacity 0和{{1}}，孩子不会去任何地方。