绝对定位的孩子与边境

这里是我的html：绝对定位的孩子与边境

<div class="xoxo"> 
     <div class="field"> 
      <label for="xo">Destination</label> 
      <input class="animatedinput" type="text" id="xo" /> 
      <div class="jabudunapoveda">Here</div> 
     </div> 
    </div>

这里的CSS：

.animatedinput { 
    padding: 1em 0 1em 2em; 
    position: absolute; 
    border: 0; 
    width: 100%; 
    margin: 0; 
    top: 0; 
    left: 0; 
    z-index: 3; 
    border-radius: 10px; 
} 
.field { 
    width: 100%; 
    height: auto; 
    position: relative; 
    border-radius: 10px; 
    border: 2px solid red; 

} 
label { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    line-height: 2em; 
    top: 0; 
    left: 1.5em; 
    z-index: 4; 
} 
.jabudunapoveda { 
    width: 100%; 
    height: 200px; 
    line-height: 200px; 
    top: 20px; 
    position: absolute; 
    background: #f4f4f4; 
    display: block; 
    border-radius: 0 0 10px 10px; 
    z-index: 2; 
} 
.xoxo { 
    width: 50%; 
    margin: 100px auto 4em; 
    z-index: 2; 
    height: auto; 
    border-radius: 10px; 
}

分度类jabudunapoveda必须是绝对定位
为什么红色边框的div以上与类.field只有0px高度？
.field的高度未知。

目标是使div与类.field 100％高度，所以红色边框将结束在jabudunapoveda div的底部。

这里是codepen

来源

2016-08-06 Karolina Ticha

为什么绝对高度还大吗？ http://codepen.io/anon/pen/zBmVXj?editors=1100如果绝对是绝对需要的，那么可能只设置绝对父母; http://codepen.io/anon/pen/qNJzwQ?editors=1100 –

如果你点域改变这一点，它的工作

.field { 
    width: 100%; 
    height: 250px; 
    position: relative; 
    border-radius: 10px; 
    border: 2px solid red; 

}

DIV领域，必须有高度比.jabudunapoveda

来源

2016-08-06 22:49:14

绝对定位的孩子与边境

回答

相关问题