Как я могу позиционировать фиксированный div относительно тела, если он находится внутри фиксированного родительского div?
В настоящее время я работаю над макетом CSS, где у меня есть фиксированный родительский div, содержащий другой div. Я хочу, чтобы внутренний элемент div был зафиксирован относительно тела, а не его родителя.
Код (Попутный ветер):
<div class = "h-screen bg-red-100">
<div class = "fixed left-1/2 top-1/2 h-80 w-80 -translate-x-1/2 -translate-y-1/2 bg-red-300">
<div class = "fixed top-10 h-40 w-40 bg-red-600">I want to make this div fixed relative to body</div>
</div>
</div>
Детская площадка попутного ветра
Есть ли способ добиться этого без JavaScript? Если нет, то как я могу сделать это с помощью JavaScript?
Я также тщательно исследовал и искал Stack Overflow, но не смог найти решение, которое точно соответствовало бы моим требованиям.
Спасибо!
Больше информации:
Основываясь на ответах @Paulie_D и @Yogi, я еще раз проверил свой код. Если я использую какое-либо свойство перевода в своем коде, то я обнаружил, что оно предназначено для модального открытия и закрытия transition (открытие сверху вниз и закрытие сверху вниз). Для этой цели я добавил свойство перевода.
<div
role = "dialog"
aria-modal = "true"
tabIndex = "-1"
onKeyDown = {handleTabKey}
ref = {modalRef}
className = {`fixed top-0 left-0 inset-0 flex justify-center items-center bg-black z-50 bg-opacity-50 backdrop-blur-sm ${
isModalOpen ? "opacity-100" : "opacity-0 pointer-events-none"
} transition-all ease-in-out`}
>
<div
className = {`bg-white rounded-md w-[30%] p-3 tb:p-6 ${
isModalOpen ? "translate-y-0" : "-translate-y-full"
} transition-all ease-in-out`}
>
. . . .
</div>
</div>
Сейчас я собираюсь удалить его, но, пожалуйста, может ли кто-нибудь помочь мне, как мы можем добиться того же перехода без свойства перевода?
Просто чтобы уточнить: предоставленная структура bg-red-100 h-screen div является лишь примером, а в моем реальном проекте структура более сложная. Перемещение этого div за пределы этого div потребует значительной реструктуризации, которая на данный момент невозможна. Тем не менее, я ценю ваше предложение. Если нет простого решения CSS, я был бы открыт для изучения альтернатив JavaScript, но объяснение всего сценария проекта может оказаться для меня довольно трудным.
Просто чтобы переместить фиксированный дочерний div из фиксированного родительского div, если они не имеют никакого отношения к положению.
Я не уверен, почему это представляет для вас проблему. Элемент position: fixed всегда позиционируется относительно body, но вам необходимо указать, где он расположен. - codepen.io/Paulie-D/pen/KKYXaZB
Это работает? play.tailwindcss.com/oxLUCRm7ch
Если вы используете фиксированное положение и хотите, чтобы что-то скользило сверху вниз, вы можете позиционировать его на основе значения bottom вместо top. Использование bottom: 100% полностью переместит элемент за пределы экрана над видимой областью, а затем, когда вы захотите опустить его вниз, вы уменьшите это значение до того места, где вы хотите расположить элемент на экране.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вы пытались добавить позицию: относительно вложенного div? Поиграйтесь с примером CSS
.container-div {
padding: 10px 10px 0;
background-color:#c3c3c3;
width:200px;
}
.child-div {
display: inline-block;
width: 100px;
height: 60px;
position:relative;
top:-20px;
border: 1px solid #efefef;
background-color: #f5f5f5;
}<br><br><div class = "container-div">
<div class = "child-div">
This div appears to be nested.
</div>
</div>Попробуйте добавить position: relative ко второму дочернему элементу, родителю или телу и position: fixed к третьему:
Код:
<div class = "flex justify-center items-center h-screen bg-red-100">
<div class = "h-80 w-80 bg-red-300">
<div class = "fixed left-0 top-0 flex h-40 w-40 items-center justify-center bg-red-600">I want to make this div fixed relative to body</div>
</div>
</div>
Внешний CSS:
body {
position: relative;
}
Результат:
В чем проблема?
Удалить преобразования из родительского элемента
Примечание к техническим характеристикам :
Любое значение свойства Transform, отличное от none, также приводит к элемент для создания содержащего блока для всех потомков. Его поле заполнения будет использоваться для макета для всех его абсолютных позиций. потомки, потомки с фиксированной позицией и фиксированный потомок фоновые вложения.
Код OP нарушает фиксированное позиционирование, используя преобразование перевода для центрирования родительского элемента на странице.
Исправьте проблему, используя flex для центрирования родительского элемента без преобразования. Это можно сделать с помощью гибких классов Tailwind. Это центрирует родительский элемент, не затрагивая фиксированное положение дочернего элемента.
Ссылки на попутный ветер: Flex , Выровнять элементы , Выровнять контент
Фрагмент кода
<div class = "flex justify-center items-center h-screen bg-blue-100">
<div class = "fixed top-20 h-80 w-80 bg-red-300">
parent - centered
<div class = "fixed top-10 left-0 h-40 w-40 bg-green-600 text-white">
child - fixed to body
</div>
</div>
</div>
<script src = "https://cdn.tailwindcss.com"></script>Наконец, я нашел решение:
Изначально я использовал свойство перевода для модального перехода (сверху вниз).
Я обнаружил, что фиксированный элемент div всегда находится относительно тела. Однако, если к его родительскому элементу применено какое-либо свойство перевода, оно не может выходить за пределы этого родительского элемента div.
Чтобы решить эту проблему, я удалил свойство перевода. Вместо этого, для эффекта модального перехода, я добавил относительный класс ${isOpen ? "top-0" : "-top-full"}. Этот подход сработал идеально.
Спасибо всем.
Что вам мешает вынести его из
"h-screen bg-red-100"div?