Position: absolute не выходит за пределы родителя, обрезается, как исправить?

Question

[Андрей]

Есть блок с видео, который должен выходить за пределы серой области вверх, используя

position: absolute;
top: -60px;
z-index: 5;

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

Comments

[lUser L]

https://codepen.io/ - залей сюда

[Андрей]

https://www.amazone.kiev.ua/

[Spartak (Web-StyleStudio)]

gurin-develop,
z-index увеличьте

[Андрей]

Spartak (Web-StyleStudio), пробовал, не помогает. 2 дня воевал с этим. сейчас в codepen набросал аналог, все работает.... Мистика, буду код сносить и писать заново, где-то наверное намудрил.

[Spartak (Web-StyleStudio)]

gurin-develop,
Может быть банальная опечатка в стилях, например русская буква, лишний символ итд.

[Андрей]

Spartak (Web-StyleStudio), набросал аналог: https://codepen.io/andrej-gurin/pen/BaKoJLR - все работает.
Сейчас переписал часть, которая не поддается, получается:

<div class="video-text">
			<div class="video-line">
				<div class="video">
					<!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->
					<video class="video-src" id="video" width="550" height="320" poster="<?php the_field('video-cover'); ?>" preload="metadata" controls="controls">
					<source type="video/mp4" src="<?php the_field('video-homepage'); ?>" />
				</div>
				<div class="text">
					<h2><?php the_field('h2-video'); ?></h2>
					<p><?php the_field('text-video'); ?></p>
				</div>
			</div>
		</div>

и соответственно:

.video-text {
	clip-path: polygon(93% 0, 100% 40%, 100% 100%, 0 100%, 0 0);
	background: #F8F8F8;
	position: relative;
	top: -160px;
}

.video-text .video-line {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-top: 40px;
}

.video-line .video {
	position: relative;
	top: -80px;
	z-index: 20;
}

чет не работает, подскажите пожалуйста, может вообще не в ту сторону соображаю и верстать совсем с другим подходом нужно?

Answer 1

[fallus]

У .video-text вы применили clip-path
Это всё его вина. Он виноват.

Comments

[Андрей]

мне фигура нужна. Ее лучше отдельным div'ом сделать и сместить видео и текст через него?

Answer 2

[Андрей]

https://codepen.io/andrej-gurin/pen/BaKoJLR