html - 溢出的隐藏div将内容移到右侧

我有两次潜水。一个里面另一个。父级具有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中从左到右保持如下：



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

最佳答案

您可能有太多的CSS属性。实际上，您的父母有两个不同的位置属性。

 <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>

只是尝试保持简单。