Position unten neben nur 2 div mit absoluter Position

Question

Wie Sie eine bottom 0 div nur nach 2 div mit beiden div Position absolut mit css Position positionieren.

Ich möchte das blaue Div unterhalb des schwarzen Randes erscheinen. In meiner aktuellen Demo überschneiden sich die Grenze und das Blau wie in meinem Projekt. Wie machen sie nicht

.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

Making the position:absolute entfernt die Elemente aus ihrer normalen Strömung auf der Seite zu überlappen.

Sie können versuchen, etwas wie dieses

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

this helps ..

Answer 2

Versuchen Sie es mit diesem 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>