Wie ein div unter einem anderen Div haben, vorausgesetzt, dass die Position absolut sein muss?

Question

Ich bin ein bisschen hoffnungslos in diesem - ich weiß, es gibt viele Antworten bereits, aber um meine Website meist responsive zu halten, wie staple ich diese divs aufeinander, ohne die Position Aspekt ändern, so dass es bleibt das Zentrum aber eins ist übereinander? Die Fußzeile hat nichts mit dem Hauptinhalt zu tun.

Derzeit überlagern sie sich in der Mitte der Seite, aber ich möchte einen Weg finden, wo „Container“ div über dem „Symbol-div“ ist

.container { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
    align: center; 
 
    text-align: center; 
 
} 
 
.icon-div { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
    align: center; 
 
    text-align: center; 
 
} 
 
.footer { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-100%); 
 
    align: center; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <img alt="Robert Xu" width="380" title="Robert Xu" src="http://i.imgur.com/gTgVruY.jpg"><br /> 
 
    <h1>徐博</h1> 
 
    <h4 style="margin-top:0px;">Robert Xu</h4> 
 
    <p><span class="zh">中國 上海</span><span class="dot">&nbsp;&nbsp;&nbsp;·&nbsp;&nbsp;&nbsp;</span><span class="en">Melbourne, Australia</span></p> 
 
</div> 
 
<div class="icon-div"> 
 
    <p class="en"> 
 
    <a class="icon" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>&nbsp;&nbsp; 
 
    <a class="icon" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>&nbsp;&nbsp; 
 
    <a class="icon" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>&nbsp;&nbsp; 
 
    </p> 
 
</div> 
 
<div class="footer"> 
 
    <p class="footer-text">&#169; 2014-2016 Robert Xu. All Rights Reserved.</p> 
 
</div>

Answer 1

So wird es aussehen, wenn Sie ein gemeinsames Eltern-Div haben, das absolute ist, und die zwei Divs innerhalb des Elternelements platzieren, ohne sie als absolute zu markieren.

.container { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
    align: center; 
 
    text-align: center; 
 
} 
 
.icon-div { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
    align: center; 
 
    text-align: center; 
 
} 
 
.footer { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-100%); 
 
    align: center; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div> 
 
    <img alt="Robert Xu" width="380" title="Robert Xu" src="#"><br /> 
 
    <h1>徐博</h1> 
 
    <h4 style="margin-top:0px;">Robert Xu</h4> 
 
    <p><span class="zh">中國 上海</span><span class="dot">&nbsp;&nbsp;&nbsp;·&nbsp;&nbsp;&nbsp;</span><span class="en">Melbourne, Australia</span></p> 
 
    </div> 
 
    <div> 
 
    <p class="en"> 
 
    <a class="icon" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>&nbsp;&nbsp; 
 
    <a class="icon" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>&nbsp;&nbsp; 
 
    <a class="icon" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>&nbsp;&nbsp; 
 
    </p> 
 
    </div> 
 
</div> 
 
<div class="footer"> 
 
    <p class="footer-text">&#169; 2014-2016 Robert Xu. All Rights Reserved.</p> 
 
</div>

Answer 2

Sie betrachten können mit Display: flex, anstatt zu spielen, um mit Positionen

Flex spricht für Layouts

Überprüfung dieser Ausschnitt

.maincontainer { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 
.container { 
 
    text-align: center; 
 
}

<div class="maincontainer"> 
 
    <div class="container"> 
 
    <img alt="Robert Xu" width="380" title="Robert Xu" src="http://i.imgur.com/gTgVruY.jpg"> 
 
    <br /> 
 
    <h1>徐博</h1> 
 
    <h4 style="margin-top:0px;">Robert Xu</h4> 
 
    <p><span class="zh">中國 上海</span><span class="dot">&nbsp;&nbsp;&nbsp;·&nbsp;&nbsp;&nbsp;</span><span class="en">Melbourne, Australia</span> 
 
    </p> 
 
    </div> 
 
    <div class="icon-div"> 
 
    <p class="en"> 
 
     <a class="icon" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>&nbsp;&nbsp; 
 
     <a class="icon" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>&nbsp;&nbsp; 
 
     <a class="icon" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>&nbsp;&nbsp; 
 
    </p> 
 
    </div> 
 
    <div class="footer"> 
 
    <p class="footer-text">&#169; 2014-2016 Robert Xu. All Rights Reserved.</p> 
 
    </div> 
 
</div>

Hoffen, es hilft