z-index無法正常工作

Question

z-index似乎不起作用:(我不確定我在做什么錯...請幫助

的HTML

    <div class="login">
        <div id="container">
           <!-- Hello header -->
           <div id="header">
               <h1 id="site-name">
               <img src="head.jpg" alt="header" />
                    Welcome to <br/>Blah blah</h1>
                    &nbsp;&nbsp;&nbsp;
            </div>

            <!-- end header -->


             <!--Hello Content -->
            <div id="content">
                    <asp:Label ID="lblUsername" runat="server" Text="Username"></asp:Label>
                    &nbsp;&nbsp;&nbsp;
                    <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
                    <br /><br />
                    <asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
                    &nbsp;&nbsp;&nbsp;
                    <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
                    <br /><br />
                    <asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnlogin_Click" Width="47px"/>
            </div>
        </div>
    </div>

的CSS

/* Login Box */
.login
{
    background: #b6b7bc;
}

#container
{
    background: white;
    border: 2px solid #818181;
    width: 400px;
    margin-left: auto;
    margin-right:auto;
    margin-top: 100px;
}

#header
{
    text-align:center;
}

img
{   
    z-index: -1;
}

當前，當將img {}位置設置為相對位置並將z-index設置為1 http://i.stack.imgur.com/XkIjk.png時，想要訪問http://i.stack.imgur.com/d6HU8.png

Answer 1

看到評論，答案竟然是：

• 僅將<h1 id="site-name">中的文本<h1 id="site-name"> span 。

• 采用：

   #site-name { position: relative } #site-name span { position: absolute; top: 0; left: 0; width: 100% } 

---

為了使z-index能夠執行任何操作，您還需要添加position: relative 。

但是，設置負的z-index值有時會產生奇怪的結果 。

您實際上想做什么？

Answer 2

加

position: relative;

到您的img {}

Answer 3

z-index僅適用於absolute ， fixed或relative元素。

默認值為static ，因此您需要添加position: relative對於img 。