Question

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 任何帮助将非常感激！

Answer 1

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

该值不应为0.7。

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

应为70。

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

Answer 2

你试过

吗？

z-index：3！important;

Answer 3

我个人会重新排序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
}

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

Z-index不工作IE

3 个答案: