当父 div 定位为相对而子 div 定位为绝对时，元素变得不可见答案

【问题标题】：Element becomes invisible when parent div is positioned as relative and child div as absolute当父 div 定位为相对而子 div 定位为绝对时，元素变得不可见
【发布时间】：2014-07-21 14:50:16
【问题描述】：

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

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>

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

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

【问题讨论】：

尝试为父 div 设置一些最小高度
@Kiran 它准确显示了我为父 div 设置的数量
那是不可能的。 overflow:hidden也不例外。
我不明白你想在这里做什么？你只设置溢出隐藏。之后你想显示内容。只有一种方法是保持新的 div 位置固定。所以它会一直可见。
@rhgb 应该有办法，没有什么是不可能的。

标签： html css

【解决方案1】：

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

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

【讨论】：