z-index is not working as expected

Question

z-index doesnt seem to work :( I am not sure what I am doing wrong... please help

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

currently when setting in img{} position to relative and z-index to 1 https://i.sstatic.net/XkIjk.png want to https://i.sstatic.net/d6HU8.png

Answer 1

See the comments, the answer turned out to be:

• Wrap just the text inside <h1 id="site-name"> in a span.

• Use:

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

---

For z-index to do anything, you need to also add position: relative.

However, setting a negative z-index value sometimes does strange things.

What are you actually trying to do?

Answer 2

z-index only applies to elements that are absolute, fixed or relative.

The default is static, so you'll need to add position: relative to your img.

Answer 3

add

position: relative;

to your img {}