ポジションボトムの直下2 divの絶対位置で

Question

2 divの直後にdivを配置し、絶対位置がcssのdivにする方法を教えてください。

黒の境界線のすぐ下に青色のdivが表示されるようにします。私の現在のデモでは、境界線と青はプロジェクトのように重なっています。彼らはposition:absoluteは、ページ上の通常の流れから要素を削除作り

.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>

Answer 1

重ならないようにする方法。

あなたは

<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

ホープ、このことができます。この

HTMLのようなものを試すことができます。..

Answer 2

このコードを試してみてください。

.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>