【发布时间】：2015-09-24 14:43:33
【问题描述】：
我正在尝试在带有背景图像的 div (ccontainer) 顶部显示一个“链接按钮”。它适用于 position:absolute 但使用 position:relative 它会消失。我想知道为什么我希望按钮与 div 相关。
我的另一个问题是如何让我的“scontent” div 出现在（下方）我的“contnent”div 之后。我将背景图像设置为透明，并且可以看到从后面重叠的“scontent”灰色背景颜色。
body
{
margin: 0;
padding: 0;
background-color: #999;
}
.header
{
z-index:3;
position:fixed;
background-color:#2B193E;
border:0px solid #ffffff;
height:70px;
left:0;
width:100%;
top:0;
/*Opacity start*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.7;
/*Opacity end*/
}
.hcontainer
{
position: relative;
width:100%;
}
.headingtext
{
color: #ffffff;
text-align: center;
width: 100%;
}
.content
{
z-index:1;
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
padding:0px 0px;
}
.ccontainer
{
height: 100%;
width: 100%;
background:url(my.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
opacity: 0.9;
background-size: 100% 100%;
}
.scontent
{
width: 100%;
height: 2000px;
padding:0px 0px;
}
.sccontainer
{
width: 100%;
height: 100%;
background-color: #444444;
}
.footer
{
z-index:2;
background: #2B193E;
position: fixed;
bottom:0;
height:5em;
width: 100%;
padding: 0em 0em;
/*Opacity start*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.7;
/*Opacity end*/
}
.fcontainer
{
position:relative;
color: #fff;
text-align: center;
top: 40%;
}
.btn
{
position: absolute;
width: 150px;
margin-left:-75px;
left: 50%;
bottom:200px;
display: inline-block;
padding: 5px;
color: #ffffff;
border: 2px solid #fff;
border-radius: 5px;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}
.btn:hover, .btn:focus, .btn:active {
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in,
color 0.3s ease-in;
}<body class="body">
<div class="header">
<div class="hcontainer">
<h1 class="headingtext">Poise for victory!</h1>
</div>
</div>
<div class="content">
<div class="ccontainer">
<a href="http://www.google.com" class="btn"> Submit!</a>
</div>
</div>
<div class="scontent">
<div class="sccontainer"></div>
</div>
<footer class="footer">
<div class="fcontainer">
MADE <em class="calluna">in</em> USA
</div>
</footer>
</body>*编辑：这里有一些图片说明了我的意思。左边是我希望的布局，右边是现在的布局。第二个图像显示了灰色背景如何从后面与背景图像重叠。我还使用 z-index 将页眉和页脚保留在 2 个内容上。
【问题讨论】：
-
你在你的css中做了一些奇怪的事情，我不太明白你的意思或你想要做什么。如果您可以在codepen.io/pen 上重现问题和/或展示您正在尝试做的事情或更好地解释的图像，我可能会提供帮助
-
您希望按钮显示在哪里？
-
只需从上面的代码中删除所有绝对位置和 z-indexes 即可让您走上正轨
-
你使用绝对的东西真的很糟糕，布局杂乱无章。
-
另一件事尝试不使用高度使用填充代替
标签： html css button layout background