gpt4 book ai didi

html - 嵌套在固定位置 div 中的绝对定位 div 的 Z-index

转载 作者:技术小花猫 更新时间:2023-10-29 11:47:51 26 4
gpt4 key购买 nike

我有一个固定位置的 div(标题),它有一个绝对位置的子 div,我希望它位于所有内容的顶部(就 z-index 而言),但我似乎无法弄清楚该怎么做这个。具有绝对位置的子 div 的高度大于标题,但不会超出。

The fiddle is here .

<!doctype html>
<html lang="en">
<body>
<div class="container">
<div class="header">
<div class="center">
<div id="pgSearch" class="search-box">
<div class="input-results">
<p>this should extend over the red part</p>
</div>
</div>
</div>
</div>
<div class="content">
<div class="center">
<p>content</p>

</div>
</div>
</div><!--container-->
</body>
</html>

.container {
width: 100%;
height: 100%;
padding-top: 89px;
position: relative;
z-index:10;
background:red;
}

.header {
position: fixed;
height: 89px;
display: block;
padding: 0 20px;
top: 0px;
left: 0px;
right: 0px;
overflow-y: hidden;
background: green;
z-index: 500;
}
.search-box {
width:300px;
float:left;
position:relative;
z-index:501;
}
.search-box .input-results {
position: absolute;
top:10px;
left: 1px;
width:300px;
height:300px;
z-index:9999;
background: white;
}

我想要的是白色 div(输入结果)位于所有内容之上,但它在固定的标题 div 的末尾被截断。

我正在想办法解决这个问题。

最佳答案

你有:

overflow-y: hidden;

.header

这意味着任何超过 .header 高度的内容都将被截断。如果不需要,请删除该属性

关于html - 嵌套在固定位置 div 中的绝对定位 div 的 Z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14442246/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com