CSS问题

我在HTML文件中创建的应用程序与下面的代码CSS问题

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

这显示了页面

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

我的理解有什么问题？请澄清......我花了几个小时来理解这一点，但仍然没有运气，为什么它表现得如此呢？

来源

2017-08-04 jahanpanahh

首先，你应该正确编写你的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 -5.5vh的

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

来源

2017-08-04 04:50:10 abhimanyu

嗨abhimanyu，感谢您的评论....我不希望代码将按钮放在BG图像下面。我想了解为什么我发布的代码的行为如此？根据我的理解，哪些特定的css规则正在制作图像上方的所有3个按钮。而根据我的理解，它们应该位于图像下方？ – jahanpanahh

负利润率造成.header社交向上移动，并在配置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. 
}

来源

2017-08-10 13:18:10

回答

相关问题