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

Question

[darumaka]

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

Скриншот

<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;
}

Comments

[Ankhena]

Может заменить вот эту всю кучу кода на обычный box-shadow?

[darumaka]

Спасибо большое за наводку!!! :)

Answer 1

[Илья Корень]

Добрый день.
Когда вы задаете элементу position: absolute, то он скажем так теряет свое положенное место на странице и может лежать где угодно, все зависит от того где вы его расположите.
Если вы ему укажите:

.bg-block {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

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

Comments

[FKV]

"то он будет такого же размера как и родитель и будет там же, где и родитель."
Чуть поправлю - не просто родителя, а ближайшего позиционированного родителя.

[darumaka]

Поняла Вас! Спасибо большое за развернутый ответ! Если Вам не сложно, может Вы подскажите самое целесообразное решение для позиционирования этого блока, исходя из дизайна макета? Дизайн подразумевает смещение этого элемента (вниз и вправо) + очень хотелось бы чтобы элемент адаптировался при сжатии окна браузера. Именно для этого задавала значения высоты и ширины в относительных единицах.

[Илья Корень]

darumaka, вариантов может быть много. В целом, я думаю лучше сделать через свойство box-shadow.

[darumaka]

Спасибо Вам большое за помощь!