[英]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.