Question

我有一个表单向导，我想在单击更改步骤按钮时实现一些转换。我创建了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中应用转换并更改其left属性，因此如果我不添加overflow:hidden，那么我会动画在里面的表单中，我会看到表单溢出的父元素。

Answer 1

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

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

当父div被定位为relative而子div被定位为绝对时，元素变得不可见

1 个答案: