<div id="headContainer">
<div id="blackBar">
<div class="content">
<img src="../Images/logo.png" class="logo" alt="logo" />
<div id="clientSettings">
<div id="settingsContainer">
<ul>
<li><asp:LinkButton ID="endSession" OnClick="endSession_Click" Text="Exit" runat="server" /></li>
<li>not available</li>
</ul>
</div>
</div>
<div id="clientProfile"></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#clientSettings').click(function () {
$('#settingsContainer').toggle();
});
});
</script>
<div id="grayBar">
</div>
</div>
好的，正如您从上面所猜到的那样，我正在尝试使用jQuery，一旦单击了#clientSettings，就显示#settingsContainer。 我可以使用.toggle()方法实现这一点。 但是，#settingsContainer需要重叠#grayBar。
请参见下面的CSS：
headContainer：
#headContainer
{
top : 0;
left : 0;
width : 100%;
height : 100px;
position : fixed; <- or relative doesn't matter.
z-index : 1;
}
#headContainer div#grayBar
{
top : 0;
left : 0;
position : relative; <- or fixed doesn't matter.
width : 100%;
height : 50px;
background-color : #f1f1f1;
z-index : 1;
}
客户端设置 + 设置容器：
#headContainer div#blackBar div#clientSettings
{
float : left;
position : relative;
width : 25px;
height : 50px;
background-image : url('../Images/Icons/endSession.png');
background-repeat : no-repeat;
background-position : center center;
}
#headContainer div#blackBar div#clientSettings:hover
{
cursor : pointer;
background-color : #636363;
}
#headContainer div#blackBar div#clientSettings #settingsContainer
{
position : relative; <- tried using absolute instead.
top : 50px;
left : 0;
padding : 50px;
background-color : Green;
z-index : 99999; <- doesn't really matter.
}
我正在尝试找到一种方法，使
#settingsContainer重叠其父元素和其他所有内容，同时保持它作为#clientSettings的子元素。谢谢。