html - Z 索引在 IE 中不起作用

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)