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

这将页面显示为

我的问题是红色心形按钮、蓝色 friend 按钮和绿色聊天按钮应该根据 css 显示在背景图像下方……但为什么它们显示在图像上方？ bg2.jpg 图片位于 div 内，所有这 3 个按钮都指定了绝对位置和 bottom: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;
}