这是加载屏幕的代码片段。
我想在加载器动画下方放置文本，例如:Loading。
我无法在 .loader1 div 下正确放置/排序 div。
.loader {
position: absolute;
width: 100%;
height: 100%;
background: #222222;
z-index: 1000;
}
.loader1 {
z-index: 1001;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #DAC500;
border-right: 16px solid #4A6FB1;
border-bottom: 16px solid #DAC500;
border-left: 16px solid #4A6FB1;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}<div class="loader">
<div class="loader1"></div>
</div>就是这样。提前致谢。
最佳答案
像这样？
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
position: absolute;
color:white;
text-align:center;
width: 100%;
height: 100%;
background: #222222;
z-index: 1000;
}
.loader1 {
z-index: 1001;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #DAC500;
border-right: 16px solid #4A6FB1;
border-bottom: 16px solid #DAC500;
border-left: 16px solid #4A6FB1;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
position:fixed;
display:block;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader">
LOADING ...
<div class="loader1"> </div>
</div>
</body>
</html>关于html - 将 div 置于另一个绝对 div 之下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39799049/