Как разместить два элемента внутри div, один перед другим, и сделать так, чтобы тот, что сзади, был немного ниже того, что сверху?
Это мой код в настоящее время:
<div class = "flex-col">
<div class = "mx-auto">
<iframe width = "812" height = "478" src = "https://www.youtube.com/embed/NpEaa2P7qZI" class = "rounded-[40px]"></iframe>
</div>
<div id = "circle" class = "rounded-full bg-slate-500 h-96 w-96"></div>
</div>
Это то, чего я пытаюсь достичь:
🤔 А знаете ли вы, что...
С помощью HTML можно встраивать виджеты социальных сетей и плагины для обмена контентом.
<script src = "https://cdn.tailwindcss.com"></script>
<div class = "relative">
<div class = "w-[90%] h-[350px] m-auto">
<iframe class = "w-full h-full" src = "https://www.youtube.com/embed/NpEaa2P7qZI"
class = "rounded-[40px]"></iframe>
</div>
<div class = "absolute rounded-full bg-slate-500 h-96 w-96 top-[50px] left-[50%] translate-x-[-50%] z-[-1]" id = "circle" ></div>
</div>Попробуйте этот код
Установите положение родительского элемента на относительное, а дочерний элемент, который вы хотите переместить, на абсолютное. что позволит элементу использовать верхний, правый, нижний и левый. Теперь вы можете переместить элемент круга в любое место относительно родительского элемента.
А затем установите z index элемента круга на -1, чтобы показать элемент круга под другими вашими элементами.
вы можете поэкспериментировать с классами translate, top и left tailwlind, чтобы получить желаемое.