CSS Problem in Ionic App

Question

Ich habe App mit folgendem Code in HTML-Datei

<ion-content fullscreen> 
    <div class="header-parent"> 
    <img src="assets/img/bg2.jpg> 
    <div class="header-social"> 
     <img style="width:18%; margin-right:3vw src="assets/img/love-btn.png"> 
     <img style="width:40%; src="assets/img/friend-btn.png"> 
     <img style="width:18%; margin-right:3vw src="assets/img/chat-btn.png"> 
    <div> 
    <div class="profile> 
     <img src="assets/img/profile-pic.png"> 
    </div> 
    <div> 
</ion-content> 

und CSS ist als unten

.header-parent{ 
    position: relative; 
    text-align: center; 
} 

.header-social{ 
    position: absolute; 
    bottom: 0px; 
    text-align: center; 
    margin-top: -5.5vh; 
} 

.profile{ 
    width: 25%; 
    margin: 0 auto; 
    margin-top: -34vh; 
} 

Dies zeigt die Seite als

Meine Frage ist roter Herzknopf, blauer Freund b UTON und grüne Chat-Taste sollten unterhalb des Hintergrundbildes wie beim CSS angezeigt werden ... aber warum werden sie über dem Bild angezeigt? bg2.jpg Bild ist innerhalb der div und alle diese 3 Tasten sind absolute und untere Position gegeben: 0, so dass sie unter Bild als div anzeigen sollte Bild sollte am Bild enden.

Was ist falsch in meinem Verständnis? Bitte klären ... Ich habe Stunden damit verbracht, das zu verstehen, aber immer noch kein Glück, warum verhält es sich so?

Answer 1

Zuerst sollten Sie Ihren HTML-Code richtig schreiben, es gibt viele Syntaxfehler in Ihrem HTML-Code.

<ion-content fullscreen> 
    <div class="header-parent"> 
    <img src="assets/img/bg2.jpg"> 
    <div class="header-social"> 
     <img style="width:18%; margin-right:3vw" src="assets/img/love-btn.png"> 
     <img style="width:40%;" src="assets/img/friend-btn.png"> 
     <img style="width:18%; margin-right:3vw" src="assets/img/chat-btn.png"> 
    <div> 
    <div class="profile"> 
     <img src="assets/img/profile-pic.png"> 
    </div> 
</ion-content> 

Und dieses CSS versuchen, auf dem Profil pic

.header-parent{ 
    text-align: center; 
} 

.header-social{ 
    position:fixed; 
    width:100%; 
    bottom: 0px; 
    text-align: center; 
} 

.profile{ 
    width: 25%; 
    margin: 0 auto; 
    margin-top: -34vh; 
} 

Answer 2

Negative Marge von -5.5vh verursacht das .header soziale aufzusteigen und sich überlappen. So sollte Ihr CSS sein, um die gewünschte Ausgabe zu erhalten.

.header-parent{ 
    background-image:('assets/img/bg2.jpg'); //bg image would be a better option rather than an img tag 
    position:relative; //for positioning profile div relatively 
} 

.header-social{ 
    position:absolute; 
    bottom:0; 
} 

.profile{ 
    width: 25%; 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%); 
    //this will position the profile pic centered both horizontally & vertically. 
}