Ionic App 中的 CSS 问题答案

【问题标题】：CSS issue in Ionic AppIonic App 中的 CSS 问题
【发布时间】：2018-01-11 21:17:58
【问题描述】：

我在 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 个按钮的位置都是 absolute 和 bottom:0，因此它们应显示在图像下方，因为包含图像的 div 应以图像结尾。

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

【问题讨论】：

标签： css mobile ionic-framework

【解决方案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;
}

【讨论】：

嗨 abhimanyu，感谢您的评论....我不希望代码将按钮放在 bg 图像下方。我想了解为什么我发布的代码会这样？哪个特定的 css 规则使所有这 3 个按钮都位于图像上方……而根据我的理解，它们应该位于图像下方？

【解决方案2】：

-5.5vh 的负边距导致 .header-social 向上移动并在个人资料图片上重叠。这是您的 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.
}

【讨论】：