絕對定位的孩子與邊境

這裏是我的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

絕對定位的孩子與邊境

回答

相關問題