gpt4 book ai didi

html - 将
设置在其他元素之上 - CSS

转载 作者:搜寻专家 更新时间:2023-10-31 21:54:17 25 4
gpt4 key购买 nike

我有一些 html,在加载时我有一个 <div>在加载时显示,当前正在加载时,加载显示在所有内容之上,但我希望标题位于加载屏幕上方。这是 HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="loading">
<div id="loading-container">
<h1 id="loading_text">Loading...</h1>
</div>
</div>
<header>
<a id="logo" href="user_profile.html">
<h1 id="name">Name</h1>
<h2 id="hello">Hello</h2>
</a>
<nav>
<ul>
<li><a href="user_profile.html">Profile</a></li>
<li><a href="user_info.html" class="selected">Info</a></li>
<li><a href="user_specials.html">Specials</a></li>
<li><a href="user_social.html">Social</a></li>
</ul>
</nav>
</header>
</body>
</html>

这是CSS

header {
float:left;
margin:0 0 30px 0;
padding:5px 0 0 0;
width:100%;
z-index: 102;

}

#logo {
text-align:center;
margin:0;
}

h1 {
font-family:'Nunito', 'sans-serif';
margin: 15px 0;
font-size:1.75em;
font-weight:normal;
line-height:0.8em;
}

h2 {
margin:-5px 0 0;
font-size:0.75em;
font-weight:normal;
}

ul {
padding: 0 0;
}

#loading {
width: 100%;
height: 100%;
left: 0px;
position: fixed;
display: block;
background: rgba(255, 255, 255, 0.5);
z-index: 99;

}

#loading-container {
position: relative;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0);
z-index: 99;
}

#loading_image {

display: block;
margin: auto;
z-index: 100;

}

#loading_text {
color: black;
text-align: center;
z-index: 101;
vertical-align: middle

}

如你所见,我设置了 z-index标题高于其他所有内容但仍在加载屏幕下方的是 JSBin以运行示例为例,在示例中我显示加载屏幕 3 秒。

如何让标题位于加载屏幕上方?

谢谢

最佳答案

z-index位置 工作。将 position:relative 添加到 header

Point, Note:

Only works on positioned elements(position: absolute;, position: relative; or position: fixed;).

JSbin

关于html - 将 <Header> 设置在其他元素之上 - CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34079729/

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