位置底部下一個正好在2 div與絕對位置下面

如何定位bottom 0 div剛剛2 div後兩個div的位置絕對使用CSS。位置底部下一個正好在2 div與絕對位置下面

我想要藍色div出現在黑色邊框的正下方。在我目前的演示中，邊框和藍色重疊，就像在我的項目中一樣。如何使他們不重疊

.footer { 
 
    /*position: fixed;*/ 
 
    display: block; 
 
    position: ; 
 
    /*position:absolute;*/ 
 
    margin: auto; 
 
    width: 100%; 
 
    height: 40px; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: #2f4296; 
 
    border-top: solid 1px #4443af; 
 
    vertical-align: middle; 
 
} 
 

 
.flip { 
 
    /backface-visibility: hidden; 
 
    border: 1px solid black; 
 
    height: 100%; 
 
    font: normal 14px helvetica, arial, san serif; 
 
    padding: 10px; 
 
    position: absolute; 
 
    transform-origin: 50% 50% 0px; 
 
    transition: all 3s; 
 
    backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    -ms-backface-visibility: hidden; 
 
    -o-backface-visibility: hidden; 
 
    -webkit-backface-visibility: hidden; 
 
    border: 1px solid black; 
 
    /*height: 100%;*/ 
 
    font: normal 14px helvetica, arial, san serif; 
 
    /*padding: 10px;*/ 
 
    position: absolute; 
 
    transform-origin: 50% 50% 0px; 
 
    -moz-transform-origin: 50% 50% 0px; 
 
    -ms-transform-origin: 50% 50% 0px; 
 
    -o-transform-origin: 50% 50% 0px; 
 
    -webkit-transform-origin: 50% 50% 0px; 
 
    transition: all 3s; 
 
    -moz-transition: all 3s; 
 
    -ms-transition: all 3s; 
 
    -o-transition: all 3s; 
 
    -webkit-transition: all 3s; 
 
}

<div class="flip"></div> 
 
<div class="flip"></div> 
 

 
<div class="footer"></div>

來源

2017-07-18 Giant

是有可能使用花車，而不是絕對位置？ –

使得position:absolute去除網頁上的正常流動的元素。

你可以嘗試這樣的事情

HTML

<div class="flip-container"> 
<div class="flip"></div> 
<div class="flip"></div> 
</div> 
<div class="footer"></div>

CSS

.footer { 
    display: block; 
    margin: auto; 
    width: 100%; 
    height: 40px; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-color: #2f4296; 
    border-top: solid 1px #4443af; 
    vertical-align: middle; 
} 
.flip-container{ 
    position: relative; 
    height:90vh; 
} 

.flip { 
    /backface-visibility: hidden; 
    border: 1px solid black; 
    height: 100%; 
    font: normal 14px helvetica, arial, san serif; 
    padding: 10px; 
    position: absolute; 
    transform-origin: 50% 50% 0px; 
    transition: all 3s; 
    backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    border: 1px solid black; 
    /*height: 100%;*/ 
    font: normal 14px helvetica, arial, san serif; 
    /*padding: 10px;*/ 
    position: absolute; 
    transform-origin: 50% 50% 0px; 
    -moz-transform-origin: 50% 50% 0px; 
    -ms-transform-origin: 50% 50% 0px; 
    -o-transform-origin: 50% 50% 0px; 
    -webkit-transform-origin: 50% 50% 0px; 
    transition: all 3s; 
    -moz-transition: all 3s; 
    -ms-transition: all 3s; 
    -o-transition: all 3s; 
    -webkit-transition: all 3s; 
}

Link for reference

希望這有助於..

來源

2017-07-18 03:22:24

什麼'90vh'在css中的高度爲 – Giant

vh是測量單位'視口高度'; –

試試這個代碼。

.container { 
 
    position: relative; 
 
    height:50vh; 
 
} 
 
.footer { 
 
    display: block; 
 
    position: ; 
 
    margin: auto; 
 
    width: 100%; 
 
    height: 40px; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: #2f4296; 
 
    border-top: solid 1px #4443af; 
 
    position: absolute; 
 
    top:100%; 
 
} 
 
.flip { 
 
    height: 100%; 
 
    padding: 10px; 
 
    position: absolute; 
 
    border: 1px solid black; 
 
    position: absolute; 
 
    border-bottom-width:0; 
 
}

<div class="container"> 
 
    <div class="flip"></div> 
 
    <div class="flip"></div> 
 

 
    <div class="footer"></div> 
 
</div>

來源

2017-07-18 05:48:41

waht是'高度：50vh;'的意思 – Giant

位置底部下一個正好在2 div與絕對位置下面

回答

相關問題