Как расположить блоки друг за другом?

Question

[rudaki29rus]

Необходимо таким образом расположить дивы. Вот как сделал:

.sec1{
	width: 100%;
	height: 540px;
	background: #5fc18b;
	position: relative;
}

.sec1::after{
    content: '';
    position: absolute;
    background: #5fc18b;
    min-width: 100%;
    height: 330px;
    bottom: -205px;
    -moz-transform: skewY(-10deg);
    overflow: hidden;
 }

.sec1::before{
    content: '';
    position: absolute;
    background: #308355;
    min-width: 100%;
    height: 30px;
    bottom: -165px;
    -moz-transform:  skewY(-9deg);
    overflow: hidden;
}

.sec2{
	width: 100%;
	height: 794px;
	z-index: -1;
	background: #44a36f;
}

Но блок after располагается поверх sec, а мне надо что бы порядок был какой: sec1-sec1:after-sec1:before-sec2, а получается sec1:after-sec1-sec1:before-sec2.

Answer 1

[devstudent]

after и bafore будут всегда перекрывать своих родителей по оси z , чтобы этого не было , придется добавить еще один блок, расположить его под нужным элементом черех z-index а потому уже это дополнительному элементу сделать after и before и все что хотите

Comments

[rudaki29rus]

Спасибо, но если я sec1::after заменю допустим на sec1_1, то sec1::before придется так же делать доп секцией, т.к. after и before всегда будут выше..., т.е. придется отказаться от псевдоэлементов и лепить пустые дивы..

[devstudent]

да придется

[devstudent]

пустые дивы с псевдоэлементами

[rudaki29rus]

devstudent: Если я сделаю еще два пустых дива, зачем тогда псевдоэлементы?

[rudaki29rus]

сделал так:






.sec1{
width: 100%;
height: 540px;
background: url("../img/sec1_img.png") no-repeat 40% 75px #5fc18b;
position: relative;
}

.sec1_1{
content: '';
position: absolute;
background: #5fc18b;
min-width: 100%;
height: 330px;
bottom: -205px;
-moz-transform: skewY(-12deg);
overflow: hidden;
z-index: -1;
}

.sec1_2{
content: '';
position: absolute;
background: #308355;
min-width: 100%;
height: 30px;
bottom: -165px;
-moz-transform: skewY(-9deg);
overflow: hidden;
z-index: -2;
}

.sec2{
width: 100%;
height: 794px;
z-index: -3;
background: #44a36f;
}

Не работает. Чет я все равно не догоняю...

[devstudent]

не делайте псевдоэлементы, если не нужны, я просто хотела сказать что не только эти пустые новые дивы с меньшим z-index, а еще и их псевдоэлементы будут перекрывать то что вам надо перекрыть

[devstudent]

я не вижу структуры html , без нее помочь не смогу, давайте ссылку или фиддл

[rudaki29rus]

Все, сделал;
Html:





css:

.sec1{
width: 100%;
height: 540px;
background: url("../img/sec1_img.png") no-repeat 40% 75px #5fc18b;
position: relative;
}

.sec1_1{
content: '';
position: absolute;
background: #5fc18b;
min-width: 100%;
height: 410px;
bottom: -206px;
-moz-transform: skewY(-12deg);
overflow: hidden;
z-index: -1;
}

.sec1_2{
content: '';
position: absolute;
background: #308355;
min-width: 100%;
height: 30px;
bottom: -218px;
-moz-transform: skewY(-11deg);
overflow: hidden;
z-index: -2;
}

.sec2{
position: absolute;
width: 100%;
height: 794px;
z-index: -3;
background: #44a36f;
bottom: -794px;
}

Answer 2

[Александр Сушко]

Наглядно про z-index — codepen.io/sashasushko/pen/vXJBKo