2

Z-index 的新手，一直在尝试不同的方法来让标题和功能显示在图像的顶部和底部，

这是 HTML 的部分

<div id="hero">

        <div id="header">
    <div id="headercontent">
        <div id="logo">
            The Bucks Arms
        </div><!-- #logo -->
        <div id="nav">
        <a href="index.php">Home</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="food.php">Food &amp; Drink</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="accommodation.php">Accommodation</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="about.php">About</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="contact.php">Contact</a>
        </div><!-- #nav -->
    </div><!-- #headercontent -->
</div><!-- #header -->
        <img id="heroimage" src="images/bucksoutside.jpg" alt="The outside of the beautiful old pub" /> 
        <div id="feature">
            <div id="featuretitlecontainer">
                <div id="featuretitle">
                </div><!-- #featuretitle -->
            </div><!-- #featuretitlecontainer -->
            <div id="featurecontainer"> 
                <div id="featuretext">
                </div><!-- #featuretext -->
            </div><!-- #featurecontainer -->
        </div><!-- #feature -->
    </div><!-- #hero -->

这是CSS

/* header */

#header {
    width:100%;
    background-color:#000;
    -khtml-opacity:.70; 
 -moz-opacity:.70; 
 -ms-filter:"alpha(opacity=70)";
  filter:alpha(opacity=70);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);
  opacity:.70;
  position:relative;
  z-index:3;

}

#headercontent {

    width:960px;
    height:60px;
    margin:0 auto;
}

#logo {
    padding:25px 0 0 0;
    font-size:30px;
    width:320px;
    float:left;
    text-align:center;
    color:#FFF;
}

/* nav */

#nav {
    padding:38px 0 0 0;
    width:630px;
    float:right;
    margin:0px 0 0 0;
    text-align:right;
    color:#666;
}

/* hero */
#hero {
    width:100%;
    max-width:1400px;
    margin:0 auto;
    clear:both;
    position:relative;
    z-index:1;

}

#heroimage {
    position: relative;
    top:-60px;
    margin:0 auto;
    width:100%;
    z-index:1;
}

/* Feature */
#feature {
    position:relative;
    top:-213px;
    margin:0 auto;
    z-index:2;
}

#featuretitle {
    -khtml-opacity:.70; 
 -moz-opacity:.70; 
 -ms-filter:"alpha(opacity=70)";
  filter:alpha(opacity=70);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);
  opacity:.70; 
    font-size:25px;
    padding:5px 10px 5px 10px; 
    color:#FFF;
    text-align:center;
    background-color:#000;
    position:relative;
    top:0;
    width:300px;
    margin:0 0 0 660px;
}

#featuretitlecontainer {
    width:960px;
    margin:0 auto;  
}

#featurecontainer
{
position:relative;
    width:100%;
    background-color:#000;
    -khtml-opacity:.70; 
 -moz-opacity:.70; 
 -ms-filter:"alpha(opacity=70)";
  filter:alpha(opacity=70);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);
  opacity:.70; 
}

#featuretext {
    padding:20px;
    margin:auto;
    width:960px;
    font-size:17px;
    color:#FFF;
    line-height:25px;
    background-color:#000;  
}

该网站可以在http://samdesigns.co.uk/bucksold找到 任何帮助将不胜感激！

4

3 回答 3

3

这个问题很容易解决，实际上与 z-index 无关。您错误地使用了 alpha 不透明度过滤器。

该值不应该是0.7。

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7)

应该是70。

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70)
于 2013-07-06T02:07:16.170 回答
0

你试过了吗

z-index: 3 !important;

于 2013-07-06T01:40:39.960 回答
0

我会亲自重新排序 HTML，所以我不必担心 z-index（特别是如果加上我的答案的下一部分）。

<div id="hero">
<img id="heroimage" />
<div id="header"></div>
<div id="feature"></div>
</div>

我也绝对会将标题和功能 div 分别放在#hero 的顶部和底部。 

/*example css:*/
#header {
   top:0
}
#feature {
   bottom:0
}

如果没有更多的分析或信息，我不确定您为什么选择相对定位，或者为什么要使用负顶部定位来剪辑英雄形象。也许你对这些事情有充分的理由。

于 2013-07-06T02:07:44.890 回答