我怎样才能把一个 DIV 放在另一个后面？
[英]how can i put one DIV behind another?
问题描述
我正在做我的第一个项目，但我在使用 div 时遇到了一些问题：我想将烟花放在中心文本后面，但我不知道该怎么做。 你能帮我么？
我必须写更多细节，否则我无法上传问题。 如果你想知道我的项目是关于什么的，就像我 18° 生日的生日邀请，我正在尝试做一些不同的事情。
这是代码，谢谢。
body { background-color: blue; } .centro { display: flex; flex-direction: column; justify-content: center; align-content: center; margin: 100px 0; } .text { display: flex; flex-direction: column; align-items: center; } .center-text { color: #E7ECEF; text-align: center; font-size: 50px; text-shadow: 3px 2px 1px rgba(0, 0, 0, .3); width: 30%; } .firework { display: flex; justify-content: center; } .explosion { position: absolute; width: 2px; height: 40px; transform-origin: 50% 100%; overflow: hidden; } .explosion:nth-child(1) { transform: rotate(0deg) translateY(-15px); } .explosion:nth-child(2) { transform: rotate(30deg) translateY(-15px); } .explosion:nth-child(3) { transform: rotate(60deg) translateY(-15px); } .explosion:nth-child(4) { transform: rotate(90deg) translateY(-15px); } .explosion:nth-child(5) { transform: rotate(120deg) translateY(-15px); } .explosion:nth-child(6) { transform: rotate(150deg) translateY(-15px); } .explosion:nth-child(7) { transform: rotate(180deg) translateY(-15px); } .explosion:nth-child(8) { transform: rotate(210deg) translateY(-15px); } .explosion:nth-child(9) { transform: rotate(240deg) translateY(-15px); } .explosion:nth-child(10) { transform: rotate(270deg) translateY(-15px); } .explosion:nth-child(11) { transform: rotate(300deg) translateY(-15px); } .explosion:nth-child(12) { transform: rotate(330deg) translateY(-15px); } .explosion:before { content: ""; position: absolute; left: 0; right: 0; top: 100%; width: 2px; height: 20px; animation: explosion 4s ease-in-out infinite; } @keyframes explosion { 0% { top: 100%; } 33%, 100% { top: -50%; } } #firework1 { transform: scale(1); transform: translateX(-60px) translateY(-150px); } #firework1 .explosion::before { background-color: #ffde71; animation: explosion 2s ease-in-out infinite; }
<body> <div class="centro"> <div class="text"> <div class="center-text"> compleanno di <span class="typing center-text"></span> </div> </div> <div class="firework" id="firework1"> <div class="explosion"></div> <div class="explosion"></div> <div class="explosion"></div> <div class="explosion"></div> <div class="explosion"></div> <div class="explosion"></div> <div class="explosion"></div> <div class="explosion"></div> <div class="explosion"></div> <div class="explosion"></div> <div class="explosion"></div> <div class="explosion"></div> </div> </div> </div> </div> </body>
1 个解决方案
解决方案1
0 2021-11-07 00:34:37
您可以使用z-index元素将其移动到前面。
.text {
display: flex;
flex-direction: column;
align-items: center;
z-index : 5;
}
当它们接触并且在同一行上时，如何将div块放在另一个垂直排列的下面？
[英]How can I put a div block below another lined up vertically when they are touch and are on the same line?
如何使用 jQuery/JavaScript 移动/复制跨度值并将其放入另一个 div
[英]How can I move/copy span value and put it to another div using jQuery/JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.