[英]Z-index positioning not working properly
我有一个容器,我想使h2
看起来与中心对齐,后面有一条细线。 我不能做的就是使线在h2
框后面。 不管我怎么努力,它不断跨越的氢气箱。
任何帮助表示赞赏。
<div class="wrapper">
<div class="section-header">
<h2>H2 needs to be centered</h2>
<div class="line-section-header"></div>
</div>
</div>
我正在使用的CSS是:
h2 {
font-family: 'Open Sans', Arial, sans-serif;
font-family: 20px;
font-weight: 700;
text-transform: uppercase;
width: 140px;
color: #3F3F3F;
background-color: white;
padding: 5px 10px;
border: 1px solid #D3D3D3;
text-align: center;
margin: 0 auto;
z-index: 999;
}
.wrapper {
margin: 0 auto;
width: 980px;
height: 1000px;
background-color: #white;
}
.section-header {
width: 100%;
height: auto;
background-color: white;
float: left;
position: relative;
}
.line-section-header {
width: 100%;
height: 1px;
background-color: #D3D3D3;
margin-top: 15px;
position: absolute;
}
我做了一个样本。 检查我的jsfiddle http://jsfiddle.net/amitv1093/r3arp2m8/
HTML
<div class="container">
<h2> h2 </h2>
<div class="line"> </div>
</div>
CSS
.container
{
position:relative;
text-align:center;
background:#d9d9d9;
z-index:-99;
padding:12px 0px;
}
h2
{
width:100px;
background:grey;
height:50px;
text-align:center;
margin:0px auto;
line-height:50px;
}
.line
{
position:absolute;
width:100%;
height: 1px;
background: red;
top:50%;
margin:1px 0px;
z-index:-9;
}
h2 {//其他道具位置:相对; }
对齐将随着容器高度动态变化
.wrapper { margin: 0 auto; width: 980px; height: 1000px; background-color: #white; } .section-header { width: 100%; height: auto; background-color: white; float: left; position: relative; } h2 { font-family: 'Open Sans', Arial, sans-serif; font-family: 20px; font-weight: 700; text-transform: uppercase; width: 140px; color: #3F3F3F; background-color: white; padding: 5px 10px; border: 1px solid #D3D3D3; text-align: center; margin: 0 auto; z-index: 999; position: relative; } .line-section-header { width: 100%; height: 1px; background-color: #D3D3D3; top: 50%; position: absolute; z-index: 1; }
<div class="wrapper"> <div class="section-header"> <h2>H2 needs to be centered</h2> <div class="line-section-header"></div> </div> </div>
尝试添加以下内容:
h2 {
position: absolute;
left:0;
right:0;
margin:auto;
}
.line-section-header {
margin-top: 50px;
position: absolute;
}
尝试在CSS中更改此设置:
h2 {
font-family: 'Open Sans', Arial, sans-serif;
font-family: 20px;
font-weight: 700;
text-transform: uppercase;
width: 140px;
color: #3F3F3F;
background-color: white;
padding: 5px 10px;
border: 1px solid #D3D3D3;
text-align: center;
margin: 0 auto;
margin-left: 420px;
z-index: 2;
position: absolute;
}
.wrapper {
margin: 0 auto;
width: 980px;
height: 1000px;
background-color: #white;
position: relative;
}
.section-header {
width: 100%;
height: auto;
background-color: white;
float: left;
position: relative;
}
.line-section-header {
width: 100%;
height: 1px;
background-color: #D3D3D3;
margin-top: 70px;
position: absolute;
z-index: 1;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.