@JordanBelford

Почему из-за position: absolute появляться пустая область?

Здравствуйте! Столкнулся с такой проблемой, ссылки задал свойство position: absolute, появилась внизу вне блока пустое пространство. Такая проблема именно с position: absolute. Кто знает в чем мб проблема?
<section class="test">
   <h2 class="test__title">lorem</h2>
   <h3 class="test__subtitle">lorem</h3>
   <a class="test__link" href="">Подробнее &rarr;</a>
</section>

.test{
  margin-top: 100px;
  position: relative;
  background-color: #1f1f1f;
}

.test__title {
  font-size: 90px;
  line-height: 1.15;
  max-width: 648px;
}

.test__subtitle {
  font-size: 12px;
  line-height: 51px;
}

.test__link {
  font-size: 36px;
  color: blue;
  line-height: 51px;
  text-decoration: none;
  position: absolute;
  right: 0;
  bottom: calc(50% - 25px);
}

60f93c8edd2f7684946048.png
Область выделенная красным появляется после применения свойства.
  • Вопрос задан
  • 69 просмотров
Решения вопроса 2
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Absolute вырывает элемент из обычного потока. В потоке остаются h2 и h3. У последнего, вероятно присутствует нижний внешний отступ (margin-bottom). А дальше на сцену выходит эффект, называемый схлопывание марджинов
Ответ написан
aagzip
@aagzip
Блок section.test становится меньше, вот и все.

Потому что у вас не задана явно высота блока section.test
По умолчанию высота блока равна высоте контента внутри него.

position: absolute;
right: 0;
bottom: calc(50% - 25px);


Вышеуказанными свойствами вы перемещаете блок в другое место и высота section.test уменьшается.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
24 июл. 2021, в 16:35
1500 руб./за проект
24 июл. 2021, в 15:36
50000 руб./за проект
24 июл. 2021, в 15:10
3000 руб./за проект