Проблемы с position:relative и absolute. Как поставить div поверх 2 других div'ов?

Question

[freeman0204]

Вот код codepen.io/anon/pen/meONog . Нужно сделать как на картинке screenshot.ru/c2a35318cfa1b277a69dde7f59a87add . Дал верхнему блоку:

.wrapper-banner .container {
	left: 50%;
	margin-left: -470px;
	position: absolute;
	z-index: 2;
 }

Самому блоку что должен быть поверх баннера и футера дал:

.wrapper-main .container {
	border: 1px solid #dfdfdf;
	top: -30px;
	position: relative; 
	z-index: 3; 
	
}

а футеру написал так:

.wrapper-footer .container {
	left: 50%;
	margin-left: -470px;
	position: absolute;
	z-index: 2;
}

Вверху всю получилось, а вот снизу не получается. Подскажите, пожалуйста, как исправить?

Comments

[Денис Инешин]

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

[freeman0204]

Денис Инешин: Хорошо, в след. раз я буду так делать.

Answer 1

[Кирилл Туровников]

Если правильно понял:

.container{ background: #fff; }
.wrapper-footer{ margin-top: -60px; }

Comments

[freeman0204]

Спасибо, помогло.) Только я задал background: #fff; конкретно .wrapper-main .container . Вот только осталась одна проблемка. В футере только белый фон не видно контента.
Если я уберу в .wrapper-footer .container {
position: absolute;
}
то станет видно, но position: absolute; там необходим. Пытался уже по разному делать, то контента не видит то не на весь размер экрана а вписывается только в 940px.
Вот такая картина screenshot.ru/7aa61f7a7a434898c315da09cfd5d237 и вот такая картина если убрать полностью, screenshot.ru/668ef7458a4b589f2130d90958954581
.wrapper-footer .container {
left: 50%;
margin-left: -470px;
position: absolute;
z-index: 2;
}
т.е тогда для футера может и не надо position: absolute; z-index: 2; ? Так как и без него все так как нужно.

[Кирилл Туровников]

Артур Черешнюк: Честно вообще не понимаю зачем так все эти стили? ведь блок и так центруется .container { margin: 0 auto; width: 940px; } Так что да вы можете убрать.

[freeman0204]

Кирилл Туровников: Эти стили что бы задать z-index а что бы его задать нужно прописать например position: relative; а если прописать position: relative; то блок выпадет с потока и его нужно выровнять по центру с помощью left: 50%; margin-left: -470px; так же?

[Кирилл Туровников]

Артур Черешнюк: наоборот, при position:absolute; выпадает

[Кирилл Туровников]

Артур Черешнюк: relative относительное позиционирование, absolute - абсолютное, т.е. absolute позиционируется относительно родителя с relative, а если такого нет, то относительно body

[freeman0204]

Кирилл Туровников: Я знал, просто ошибся в написании про position: relative;. Да действительно. Задал .container там где ширина 940px position: relative; а position:absolute; убрал везде. И слой .container стал выше всех (только почему?) Только вот как понять задать поля margin-top: -30px; или просто top: -30px; и так и так работает. Но для меня удивительно почему работают координаты top если я не указал не relative не absolute? Или координаты могут работать и с static который указан по умолчанию?

[Кирилл Туровников]

Артур Черешнюк: странно, top/right/bottom/left можно указывать только для relative/absolute/fixed, а так top для relative это относительное смещение, т.е. ниже идущие элементы не изменят своего положения, а при margin сместятся все элементы находящие ниже

Answer 2

[Григорий]

Проблема в том, что у вас футер появляется после блока, который должен быть поверх остальных. Параметр z-index является относительным и принимается относительно текущего положения.
Самое простое - использовать JS. Можно с jQuery...

$(document).ready(function(){
    $('.wrapper-main').css('z-index',999);
});

Comments

[Кирилл Туровников]

Вообще надо использовать правильный порядок блоков/слоев, чтобы исключать их неверное перекрытие, и стараться не использовать z-index, особенно такой большой.

[Григорий]

Кирилл Туровников: согласен по поводу соблюдения правильного порядка, но не всегда это удобно. z-index можно использовать и большой, главное потом самому не запутаться. А здесь я просто привел пример, а не обозначил как безоговорочное решение. У каждого свои методы, и каждый находит их для себя сам.

[Кирилл Туровников]

Григорий: ну просто потом окажется что попапы и подложки будут под контентом или еще еще что-то, я даже у библиотек по максимуму z-index зануляю.