Html 当父div定位为相对且子div定位为绝对时，元素将不可见

我有一个表单向导，我想在单击更改步骤按钮时实现一些转换。我创建了一个

div

并设置了它的

位置：relative

和

overflow:hidden

，现在我在里面添加了两个div并将其推到左边。第二个div I定位为绝对。但是现在这个div变得不可见了。我希望这个div是可见的，父元素上隐藏的溢出。有什么办法解决这个问题吗

一些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;
}

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

一些HTML:

.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;
}

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

第一步
步骤2
此处的文本字段：
另一个领域：

更新（对于不理解问题的人）：

.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;
}

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

---

我将隐藏溢出添加到父级

div

，因为我将在inside div中应用transition并更改其left属性，所以如果我不添加

overflow:hidden

，当我为内部的表单设置动画时，我将看到表单溢出父元素。

使用javascript解决了这个问题。加载页面时，函数将标题

div

的高度和内部

div

的高度相加，并将其应用于父

div

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

---

尝试为父级设置一些最小高度div@Kiran它正好显示了我设置为父div的数量，这是不可能的<代码>溢出：隐藏也不例外。我不明白你在这里想做什么？您仅将溢出设置为隐藏。在此之后，您可以单击以显示内容。唯一的方法是保持新的div位置固定。所以它将一直可见。@rhgb应该有办法，没有什么是不可能的。