Question

我很难在我的回复网页中整理z-index，感谢您的帮助...当浏览器（Chrome，IE，请选择）调整为小于961px（或任何其他媒体类型）设置一个指定的宽度）文本根据样式（tick！）减少，但z-index不会！相反，它将id = content容器放在后面而不是在标语元素前面。我正试图创造切断文本腿的效果......这是一个设计的东西。

下面是一段代码。原始代码包含多个媒体视图（提前再次感谢）。

HTML code：

<div id="wrapper">
<div id="eye-candy" style="background-color:yellow;height:100px"></div>
<div id="tagline">A cold beer sounds good right now!...</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo augue orci, porta mollis magna dapibus a. Nunc lectus lectus, tristique non felis vitae, eleifend volutpat felis. Praesent ante ligula, ultrices ut uscipit porttitor, eleifend eu purus. Cras a neque sem.</p>
</div>
</div>

CSS代码：

#wrapper {
width: 100%;
}


@media only screen and (min-width:961px) {
#tagline {
    height: 50px;
    overflow: hidden;
    margin: 0 auto;
    max-width: 1200px;
    margin-top: -50px;
    font-size: 3.125em;
    font-family: 'century gothic', georgia, sans-serif;
    color: blue;
    z-index: 10;
    position: relative;
    padding-left:5px;
}
#content {
    display: block;
    padding-top: 30px;
    margin: 0 auto;
    text-align: left;
    background-color:green;
    z-index: 10000;
}
}

@media only screen and (max-width:960px) {
#tagline {
    height: 50px;
    overflow: hidden;
    margin: 0 auto;
    max-width: 1200px;
    margin-top: -37px;
    font-size: 2.40em;
    font-family: 'century gothic', georgia, sans-serif;
    color: red;
    z-index: 10;
    position: relative;
    padding-left:5px;
}
#content {
    display: block;
    padding-top: 30px;
    margin: -13px 0 0 0;
    text-align: left;
    background-color:green;
    z-index: 10000;
}
}

Answer 1

根据CSS spec，z-index仅应用于定位元素（位置为绝对，固定或相对的元素）。所以添加位置：相对于#content应该有帮助。

Answer 2

我做了一些更正：我希望它可以帮助你：看看这个：

http://jsfiddle.net/EnesTesla/kCgKB/embedded/result/

HTML CODE：

<div id="wrapper">
<div id="eye-candy" style="background-color:yellow;height:100px; margin-top: 100px">
<div id="tagline">A cold beer sounds good right now!...</div>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo augue orci, porta mollis magna dapibus a. Nunc lectus lectus, tristique non felis vitae, eleifend volutpat felis. Praesent ante ligula, ultrices ut uscipit porttitor, eleifend eu purus. Cras a neque sem.</p>
</div>
</div>

CSS代码：

#wrapper {
width: 100%;
}

@media only screen and (min-width:961px) {
#tagline {
    height: 50px;
    overflow: hidden;
    margin: 0 auto;
    max-width: 1200px;
    margin-top: -50px;
    font-size: 3.125em;
    font-family: 'century gothic', georgia, sans-serif;
    color: blue;
    z-index: 10;
    position: relative;
    padding-left:5px;
}

#content {
    display: block;
    padding-top: 30px;
    margin: 0 auto;
    text-align: left;
    background-color:green;
    z-index: 10000;
}

@media only screen and (max-width:960px) {
#tagline {
    height: 50px;
    overflow: hidden;
    margin: 0 auto;
    max-width: 1200px;
    margin-top: -37px;
font-size: 2.40em;
font-family: 'century gothic', georgia, sans-serif;
    color: red;
    z-index: 10;
    position: relative;
    padding-left:5px;
}
#content {
    display: block;
    padding-top: 30px;
    margin: -13px 0 0 0;
    text-align: left;
    background-color:green;
    z-index: 10000;
}

当不同的媒体屏幕宽度设置时，CSS z-index无法正常工作

2 个答案: