position inférieure suivante juste en dessous de 2 div avec la position absolue

Question

Comment positionner un bottom 0 div juste après 2 div avec les deux div ayant la position absolue en utilisant css.

Je veux que la division bleue apparaisse juste en dessous de la bordure noire. Dans ma démo actuelle, la bordure et le bleu se chevauchent comme dans mon projet. Comment les rendre ne se chevauchent pas

.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

Faire le position:absolute supprime les éléments de son flux normal sur la page.

Vous pouvez essayer quelque chose comme ça

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

Hope this helps ..

Answer 2

Essayez avec ce code.

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