我有一个表单向导,我想在单击更改步骤按钮时实现一些转换。我创建了一个 div
并设置了它的 position: relative
和 overflow:hidden
现在我在里面添加了 2 个 div 并将它推到左边。我定位为绝对的第二个 div。但是现在这个 div 变得不可见了。我希望这个 div 可见并且父元素上的 overflow hidden 。有什么解决问题的想法吗?
一些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
,当我为里面的表单设置动画时,我会看到表单溢出父元素。
最佳答案
使用 javascript 解决了问题。加载页面时,该函数将标题 div
的高度和内部 div
的高度相加,并将其应用于父级 div
$(document).ready(function(){
$(".registration-box").height($(".registration-title").height() + $(".registration-base-block2").not(".hidden-forever").height());
});
关于html - 当父 div 定位为相对且子 div 定位为绝对时,元素变得不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24818014/