Div position: ruby-position — CSS: Cascading Style Sheets

.

Давайте начнем с создания двух тегов HTML и посмотрим, что произойдет на экране.

Автор Cristian Salcescu

4,5 тыс. подписчиков

· Редактор

Автор функционального программирования в JavaScript. С энтузиазмом делится идеями. https://www.amazon.com/gp/product/B08X3TPCQ8

Еще от Cristian Salcescu и Frontend Essentials

Cristian Salcescu

in

Как выбрать определенные свойства из массива объектов

метод массива карт, функция отображения, функции высшего порядка и многое другое

·3 минуты чтения·20 июля 2021 г.

Cristian Salcescu

in

Как создать цифровые часы с помощью React Hooks

Быстрый старт с помощью useState Крючки для эффектов

·4 минуты чтения·28 июля 2021 г.

Cristian Salcescu

in

Как условно отключить кнопку отправки в функциональном компоненте

Associate состояние d, производное состояние и т. д.

·3 min read·May 16, 2022

Cristian Salcescu

в

0006 ·Чтение через 3 мин·6 сентября 2021 г.

Просмотреть все от Cristian Salcescu

Рекомендовано на Medium

JP Brown

Что на самом деле происходит с человеческим телом на глубинах Титаника

Миллисекундное объяснение

· Чтение через 4 мин·22 июня

Reed Barger

in

7 проектов React для начинающих в 2023 году (+ код)

Вы готовы начать создавать простые проекты с React, но не знаете, что делать.

С чего начать?

·6 минут чтения·11 января

Списки

Истории, которые помогут вам расти как дизайнеру

11 историй·99 сохранений

Интересные темы дизайна

199 историй·12 сохранений

Подсказки ChatGPT

17 историй ·42 сохранения

Регламент ИИ

6 историй·16 сохранений

Кристофер Клеммонс

in

9 Вопросы для интервью, которые должен знать каждый старший разработчик React

9 0054 Как разработчик React, вы в конечном итоге испытаете желание сделать следующий большой шаг к старшей роли. Многие из нас застревают, как…

·8 мин чтения·4 января

The PyCoach

в

Вы используете ChatGPT неправильно! Вот как опередить 99% пользователей ChatGPT

·7 мин чтения·17 марта

Нитин Шарма

в

Попрощайтесь с React-DnD, привет Dnd Kit: будущее перетаскивания уже здесь!

Одна из лучших библиотек для создания возможностей перетаскивания.

·Чтение через 8 мин.·1 февраля

Неприлично

10 секунд, которые положили конец моему 20-летнему браку

В Северной Вирджинии август, жарко и влажно. Я до сих пор не принял душ после утренней пробежки. Я ношу свою домохозяйку…

·Чтение: 4 мин·16 февраля 2022 г.

Просмотреть дополнительные рекомендации

Статус

Карьера

Преобразование текста в речь

html — Как позиционировать абсолютное относительное деление в другой раздел

Задавать вопрос

спросил 2 года, 6 месяцев назад

Изменено 2 года, 6 месяцев назад

Просмотрено 556 раз

У меня есть два элемента div.

Для первого div у меня есть позиция : абсолютная , а для второго div у меня просто верхнее поле: 50 пикселей.

Предполагая, что первый div (который имеет абсолютную позицию) имеет некоторые данные из бэкенда

Независимо от того, насколько длинный мой текст, как я могу всегда иметь зазор в 50 пикселей между первым div и вторым

мой код

 .box1 {
  положение: абсолютное;
  сверху: 0;
  граница: 1px сплошной красный;
  ширина: 100 пикселей;
}
.box2 {
  поле сверху: 50px;
  граница: 1px сплошной зеленый;
  ширина: 100 пикселей;
} 

 <дел>
  Lorem Ipsum просто

окно 2

   .сворачивать{
     положение: абсолютное;
        сверху: 0;
   }
   .box1 {
        
      граница: 1px сплошной красный;
      ширина: 100 пикселей;
      слово-разрыв: разбить все;
    }
    .box2 {
      положение: абсолютное;
      поле сверху: 50px;
      граница: 1px сплошной зеленый;
      ширина: 100 пикселей;
    } 

 <тело>
    <дел>
        <дел>
          Лорем Ипсум