<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点击#settingsContainer
来显示#clientSettings
。我能够使用.toggle()
方法实现这一目标。但是,#settingsContainer
需要重叠#grayBar
。
请参阅下面的CSS:
#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.
的孩子
谢谢。
答案 0 :(得分:1)
这是因为float:left
中的#clientSettings
,浮动元素来自浏览器的绘制流程,因此它们的行为类似于position:absolute
元素。您可以删除float:left
或开始使用z-index(#settingsContainer
和#clientSettings
)。以下是您的代码demo。