gpt4 book ai didi

html - z-index 顺序问题

转载 作者:太空宇宙 更新时间:2023-11-04 05:00:16 25 4
gpt4 key购买 nike

为什么下面的 Z-INDEX 顺序不起作用?

我想要的是覆盖H1和P标签的DIV标签。相反,当初始化 DIV 的 innerHTML 时,其他标签会向下移动页面。如您所见,页面上的所有元素都已定位并且 DIV 具有更高的 Z-INDEX。我还缺少什么? (HTML 和 CSS 均有效)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>z-index test</title>
<style type="text/css">
@media screen {
#myTitle {position: relative; margin-top:20px; margin-left:20px; z-index:1;}
#overLay {position: relative; margin-top:20px; margin-left:20px; z-index:999;}
.btn {position: relative; margin-left:20px;}
p {position: relative; margin-left:20px; z-index:1;}
}
</style>
</head>
<body>
<div id="overLay"></div>
<h1 id="myTitle">An H1 Header</h1>
<p>A paragraph....</p>
<p>And another paragraph....</p>
<button class="btn" onclick="on_Clear();">clear div element</button>
<button class="btn" onclick="on_Init();">init div element</button>
<script type="text/javascript">
<!--
document.getElementById("overLay").innerHTML = "Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain old HTML, no fake rot13 text on the home page, no scammy google-cloaking tactics, no salespeople, no JavaScript windows dropping down in front of the answer asking for $12.95 to go away. You can register if you want to collect karma and win valuable flair that will appear next to your name, but otherwise, it’s just free. And fast. Very, very fast.";
function on_Clear() {document.getElementById("overLay").innerHTML = "";}
function on_Init() {document.getElementById("overLay").innerHTML = "Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain old HTML, no fake rot13 text on the home page, no scammy google-cloaking tactics, no salespeople, no JavaScript windows dropping down in front of the answer asking for $12.95 to go away. You can register if you want to collect karma and win valuable flair that will appear next to your name, but otherwise, it’s just free. And fast. Very, very fast.";}
//-->
</script>
</body>
</html>

最佳答案

如果您希望元素叠加在其他元素之上,您将不得不使用 z-index 以及 position: absolute; 或使用负边距/填充。

您也不应该需要将 position:relative; 放在您的 css 中的所有内容上。

关于html - z-index 顺序问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11658556/

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