1

我正在努力整理我的响应网页中的 z-index，非常感谢您的帮助...当浏览器（Chrome、IE、选择）调整为小于 961 像素（或任何其他媒体类型设置为指定宽度）文本根据样式减小（勾号！），但 z-index 没有！相反，它将 id=content 容器放置在标语元素的后面而不是前面。我正在尝试创建切断文本腿的效果……这是一个设计问题。

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

HTML 代码：

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

2 回答 2

1

根据CSS 规范，z-index 仅适用于定位元素（具有位置：绝对、固定或相对的元素）。所以添加 position: relative to #content 应该会有所帮助。

于 2013-07-02T07:34:34.310 回答
0

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

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

HTML 代码：

<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;
}
于 2013-07-02T07:24:14.150 回答