Как расположить элемент Div над другим и относительно него | Кристиан Салческу | Frontend Essentials
Как расположить элемент Div над другим и относительно него | Кристиан Салческу | Основы внешнего интерфейса | MediumБыстрый старт с абсолютным и относительным позиционированием
Cristian Salcescu
·Follow
Опубликовано в·
4 мин чтения· 9000 5 9 июля 2021 г.
Фото Jené Stephaniuk на Unsplash В этой статье рассматривается, как поместить элемент Давайте начнем с создания двух тегов HTML и посмотрим, что произойдет на экране. 4,5 тыс. подписчиков Автор функционального программирования в JavaScript. С энтузиазмом делится идеями. https://www.amazon.com/gp/product/B08X3TPCQ8 Cristian Salcescu in Cristian Salcescu in Cristian Salcescu in Cristian Salcescu в Просмотреть все от Cristian Salcescu JP Brown Reed Barger in 11 историй·99 сохранений 199 историй·12 сохранений 17 историй ·42 сохранения 6 историй·16 сохранений Кристофер Клеммонс in 9 0054 Как разработчик React, вы в конечном итоге испытаете желание сделать следующий большой шаг к старшей роли. Многие из нас застревают, как… The PyCoach в Нитин Шарма в Неприлично Просмотреть дополнительные рекомендации Статус Карьера Преобразование текста в речь Задавать вопрос спросил Изменено
2 года, 6 месяцев назад Просмотрено
556 раз У меня есть два элемента div. Для первого div у меня есть позиция Предполагая, что первый div (который имеет абсолютную позицию) имеет некоторые данные из бэкенда Независимо от того, насколько длинный мой текст, как я могу всегда иметь зазор в 50 пикселей между первым div и вторым мой код Это должно сработать
Автор Cristian Salcescu
Еще от Cristian Salcescu и Frontend Essentials
Как выбрать определенные свойства из массива объектов
метод массива карт, функция отображения, функции высшего порядка и многое другое
·3 минуты чтения·20 июля 2021 г.
Как создать цифровые часы с помощью React Hooks
Быстрый старт с помощью useState Крючки для эффектов
·4 минуты чтения·28 июля 2021 г. Как условно отключить кнопку отправки в функциональном компоненте
Associate состояние d, производное состояние и т. д.
·3 min read·May 16, 2022 0006 ·Чтение через 3 мин·6 сентября 2021 г.
Рекомендовано на Medium
Что на самом деле происходит с человеческим телом на глубинах Титаника
Миллисекундное объяснение
· Чтение через 4 мин·22 июня 7 проектов React для начинающих в 2023 году (+ код)
Вы готовы начать создавать простые проекты с React, но не знаете, что делать.
С чего начать? ·6 минут чтения·11 января Списки
Истории, которые помогут вам расти как дизайнеру
Интересные темы дизайна
Подсказки ChatGPT
Регламент ИИ
9 Вопросы для интервью, которые должен знать каждый старший разработчик React
Вы используете ChatGPT неправильно! Вот как опередить 99% пользователей ChatGPT
·7 мин чтения·17 марта Попрощайтесь с React-DnD, привет Dnd Kit: будущее перетаскивания уже здесь!
Одна из лучших библиотек для создания возможностей перетаскивания.
·Чтение через 8 мин.·1 февраля 10 секунд, которые положили конец моему 20-летнему браку
В Северной Вирджинии август, жарко и влажно. Я до сих пор не принял душ после утренней пробежки. Я ношу свою домохозяйку…
·Чтение: 4 мин·16 февраля 2022 г. html — Как позиционировать абсолютное относительное деление в другой раздел
: абсолютная , а для второго div у меня просто верхнее поле: 50 пикселей.
.box1 {
положение: абсолютное;
сверху: 0;
граница: 1px сплошной красный;
ширина: 100 пикселей;
}
.box2 {
поле сверху: 50px;
граница: 1px сплошной зеленый;
ширина: 100 пикселей;
} <дел>
Lorem Ipsum просто
5
.сворачивать{
положение: абсолютное;
сверху: 0;
}
.box1 {
граница: 1px сплошной красный;
ширина: 100 пикселей;
слово-разрыв: разбить все;
}
.box2 {
положение: абсолютное;
поле сверху: 50px;
граница: 1px сплошной зеленый;
ширина: 100 пикселей;
} <тело>
<дел>
<дел>
Лорем Ипсум
Лучшее решение: не исправлять первый div с position: absolute; Я предлагаю вам это решение
.
