Ionic App中的CSS问题

Question

我用html文件中的以下代码创建了应用程序

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

和css如下

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

这将页面显示为

我的问题是红心按钮，蓝色朋友按钮和绿色聊天按钮应按照css显示在背景图像下方...但为什么它们显示在图像上方？ bg2.jpg图像在div内部，所有这3个按钮都被赋予绝对位置和底部：0因此它们应该显示在图像下方，因为包含图像的div应该以图像结束。

我的理解有什么问题？请澄清......我花了好几个小时来理解这一点，但仍然没有运气，为什么它会像这样？

Answer 1

首先你应该正确编写你的html代码，你的HTML代码中有很多语法错误。

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

试试这个css

.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

-5.5vh的负边距导致.header-social在配置文件pic上向上移动并重叠。以下是CSS应该如何获得所需的输出。

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