html - 当父 div 定位为相对且子 div 定位为绝对时，元素变得不可见

Question

我有一个表单向导，我想在单击更改步骤按钮时实现一些转换。我创建了一个 div 并设置了它的 position: relative 和 overflow:hidden 现在我在里面添加了 2 个 div 并将它推到左边。我定位为绝对的第二个 div。但是现在这个 div 变得不可见了。我希望这个 div 可见并且父元素上的 overflow hidden 。有什么解决问题的想法吗？

Fiddle

一些CSS:

.registration {
    overflow: hidden;
    width: 90%;
    margin: auto;
}
.registration .registration-box {
    border: 1px solid #808080;
    position: relative;
}
.registration [class*="registration-base-block"] {
    width: 100%;
    left: 0;
    position: absolute;
    -webkit-transition: left .6s;
    -moz-transition: left .6s;
    -ms-transition: left .6s;
    -o-transition: left .6s;
    transition: left .6s;
}
.registration .registration-base-block1.hidden-forever {
    left: -980px;
}

一些HTML:

<div class="registration">
    <div class="registration-box">
        <div class="registration-title">
            <div class="registration-step1">Step 1</div>
            <div class="registration-step2 disabled">Step 2</div>
        </div>
        <div class="registration-base-block1 hidden-forever">
            <div class="registration-inside-block">
                <label for="txt">Textfield here: </label>           
                <div class="registration-input">
                    <input name="txt" id="txt" type="text" maxlength="30" value="asdf"/>                
                </div>
            </div>
        </div>
        <div class="registration-base-block2">
            <div class="registration-inside-block">
                <label for="txt2">Another field:</label>            
                <div class="registration-input">
                    <input name="txt2" id="txt2" type="text"/>
                </div>
            </div>
        </div>
    </div>
</div>

更新(针对没看懂问题的):

我已将 overflow hidden 添加到父 div，因为我将在内部 div 中应用转换并更改其左侧属性，所以如果我不添加 overflow:hidden，当我为里面的表单设置动画时，我会看到表单溢出父元素。

Answer 1

使用 javascript 解决了问题。加载页面时，该函数将标题 div 的高度和内部 div 的高度相加，并将其应用于父级 div

$(document).ready(function(){
  $(".registration-box").height($(".registration-title").height() + $(".registration-base-block2").not(".hidden-forever").height());
});