Почему не позиционируется относительно ::before?

Question

[ZMaxonchik]

Привет, подскажите, почему позиционирование при помощи margin идёт относительно дива, а не пвсевдоэлеменота before? Где ошибка?

.why-block-wrap необходимо позиционировать с помощью margin относительно .why-block1::before. На деле позиционирование происходит относительно why-block1 без before

<div class="why">
   <p class="why-title">1</p>
   <div class="devider why-devider">
    <p></p>
   </div>
   <div class="why-block1">
     <div class="why-block-wrap">
      <div class="why-block-element">
        <p>2</p>
        <p>3</p>
      </div>  
     </div> 
   </div>
</div>

.why-block1 {
	background-color: #202020;
	padding-top: 115px; 
	position: relative;
}
.why-block1::before {
	content: "";
	background: url('../img/why-block1.jpg') center top no-repeat;
	width: 26%;
	height: 100%;
	display: block;
	background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
}
.why-block-wrap {
	width: 74%;
	max-width: 800px;
	margin: 0 auto 0 0; 
}
.why-block-element {
	text-align: left; 
}

Comments

[Ankhena]

Так псевдо же абсолютом прибит. Абсолютные элементы выведены из потока, остальные о них ничего не знают.

[ZMaxonchik]

Ankhena, Без абсолюта, картинка из before пропадает вообще

[Ankhena]

ZMaxonchik, да вы хотя бы скрин приложили как должно получиться. Не говоря о том, чтобы код оформить в песочнице jsfiddle.net или codepen.io

[Ankhena]

ZMaxonchik,

Без абсолюта, картинка из before пропадает вообще

Ага, потому что высота родителя не задана, а значит определяется по содержимому. Но потом вы наоборот хотите, чтобы содержимое стало по высоте родителя. Браузер не знает как вам это нарисовать, делает высоту 0 => фон не виден. Абсолют выведен из потока, в отрисовке блока родителя не участвует и может взять его высоту.

Answer 1

[gracer]

Потому что
position: absolute;

Comments

[ZMaxonchik]

Без абсолюта, картинка из before пропадает вообще