@darumaka

Почему position: absolute выходит за пределы контейнера родителя?

Почему элемент bg-block выходит за границы контейнера? Ниже прикладываю фрагмент кода и ссылка на фото той части макета, где появилась проблема (блок с картинкой).

Скриншот
62fa8777afd9c202452341.jpeg


<div class="wrapper">
  <div class="img-container">
    <img src="img/content/pexels. jpg" alt="photo" class="img">
  </div>
  <div class="bg-block"></div>
 </div>


. wrapper{
    display: flex;
    position: relative;
    width: 100%;

 .img-container {
    overflow: hidden;
    max-height: 644px;
    width: 430px;
    background-size: cover;
    padding-left: 15px;

 .img {
    width: 100%;
    height: 100%; 
    position: relative;
    z-index: 1;

.bg-block {
    height: 103%;
    width: 86%;
    background: #000;
    top: 57px;
    left: 68px;
    position: absolute;
}
  • Вопрос задан
  • 162 просмотра
Решения вопроса 1
IlyaMalone
@IlyaMalone
Frontend Developer
Добрый день.
Когда вы задаете элементу position: absolute, то он скажем так теряет свое положенное место на странице и может лежать где угодно, все зависит от того где вы его расположите.
Если вы ему укажите:
.bg-block {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

то он будет такого же размера как и родитель и будет там же, где и родитель.
Вы указали высоту больше, чем у родителя: 103% и сдвинули его относительно родителя, соответственно он и выходит за рамки.
left - определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента.
top - определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы