z-index 未按预期工作
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>
</div>
<!-- end header -->
<!--Hello Content -->
<div id="content">
<asp:Label ID="lblUsername" runat="server" Text="Username"></asp:Label>
<asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
<br /><br />
<asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
<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 时， https://i.sstatic.net/XkIjk.png 想要 https://i.sstatic.net/d6HU8.png
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>
</div>
<!-- end header -->
<!--Hello Content -->
<div id="content">
<asp:Label ID="lblUsername" runat="server" Text="Username"></asp:Label>
<asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
<br /><br />
<asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
<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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
查看评论，答案原来是：
内的文本包裹在span中。用途：
要让
z-index执行任何操作，您还需要添加position:relative。但是，设置负
z-index值 有时会做奇怪的事情。你到底想做什么？
See the comments, the answer turned out to be:
<h1 id="site-name">in aspan.Use:
For
z-indexto do anything, you need to also addposition: relative.However, setting a negative
z-indexvalue sometimes does strange things.What are you actually trying to do?
添加
将
position:relative;到您的
img {}add
position: relative;to your
img {}z-index仅适用于元素绝对、固定或相对。默认值为
static，因此您需要将position:relative添加到img中。z-indexonly applies to elements that areabsolute,fixedorrelative.The default is
static, so you'll need to addposition: relativeto yourimg.