Как сделать текст выше в css

Чтобы разместить текст поверх другого элемента в CSS, можно использовать свойство position и значение absolute или fixed в комбинации с свойствами top, right, bottom и left. Это позволяет разместить элемент в любой точке на странице независимо от других элементов на странице.

Пример:

HTML:

<div class="parent">
  <img src="image.jpg">
  <p class="text">Текст над изображением</p>
</div>

CSS:

.parent {
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #000;
  color: #fff;
  padding: 10px;
  font-size: 20px;
}

В этом примере мы создаем контейнер .parent, который содержит изображение и абзац с текстом. Затем мы добавляем свойство position: relative; для контейнера, чтобы абзац мог быть позиционирован относительно контейнера.

Затем мы задаем свойство position: absolute; и используем свойства top, left, transform, чтобы разместить абзац в верхней середине изображения. Свойство transform: translate(-50%, -50%); позволяет точно позиционировать элемент относительно центра контейнера. Мы также задаем фон и цвет текста для абзаца, чтобы он был легко читаемым.

Это пример только для текста над изображением, но с применением тех же свойств и комбинаций можно разместить элементы поверх друг друга на странице, например, для создания эффекта всплывающих окон или меню.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как сделать текст выше в css

Наш специалист свяжется с вами в ближайшее время и уточнит детали