Почему блоки показываются в обратном порядке?

Question

[rinatoptimus]

Блоки расположены в разметке один под другим: сначала блок без текста, после него блок со словом "Wave". Но на странице они отрисовываются в обратном порядке. Как это исправить?
Ссылка.
Еще раз поясню: картинка с зелеными кубиками в HTML идет первой, то есть сверху, а под ней - вторая картинка. Это в ХТМЛ. А на странице результат противоположный.

.map-teaser-container {
  position: absolute;
  width: 100%;
  height: 600px;
  background: url('http://www.metsawood.com/PublishingImages/PlanB/Extension-building/city-above-the-city-architects-competition-plan-b.jpg?RenditionID=28') no-repeat;
  background-size: contain;
  //border: 1px solid green;
}
.wave {
  //margin-top: -8px;
  position: absolute;
  width: 100%;
  height: 323px;
  background: url('https://abc-accelerator.com/wp-content/uploads/2015/05/abc-smart-cities.jpg') no-repeat;
 }

Answer 1

[Сергей]

Скорее всего свойство float задано у одного из блоков.

Comments

[rinatoptimus]

Отнюдь. По ссылке нет флоатов.

[Максим Тимофеев]

Какой флоат при абсолютном позиционировании?

[Сергей]

Максим Тимофеев: когда я писал, человек написал просто первое предложение, примеров кода не было

[Максим Тимофеев]

Сергей: резонно

Answer 2

[Максим Тимофеев]

Они расположены один над другим и в правильном порядке. Что Вас смущает? Хотите изменить порядок - есть z-index

Comments

[rinatoptimus]

В разметке сперва идет map-teaser-container, после него wave. На странице - наоборот. У вас не так?

[Максим Тимофеев]

rinatoptimus: нет. wave сверху над предыдущим. А в чем проблема задайте z-index и будет точно как зададите.

[rinatoptimus]

Максим Тимофеев: И у меня wave сверху, а в разметке wave - внизу.

[Максим Тимофеев]

rinatoptimus: Вы хотите снизу, в смысле, после? Но так у Вас же абсолютное позиционирование. Оно все одно поверх другого слоями.

[rinatoptimus]

Максим Тимофеев: ОК. А вы бы как разместили два responsive background image один под другим?

[Максим Тимофеев]

rinatoptimus: два обычных релятивных блока, для каждого background:cover;

[Максим Тимофеев]

rinatoptimus: Зачем там position: absolute; ? какова его функция?

[rinatoptimus]

Максим Тимофеев: "два обычных релятивных блока, для каждого background:cover;" - тогда они не респонсятся

[rinatoptimus]

Максим Тимофеев: Идея в том, что два блока с респонсив картинками примыкают друг к другу и респонсятся, при этом верхний имеет высоту чуть большую, чем нижний.

[Максим Тимофеев]

rinatoptimus: респонсятся?

[rinatoptimus]

Максим Тимофеев: при position: relative - нет, не респонсятся.

[Максим Тимофеев]

rinatoptimus: определение слову "респонсятся" дайте, так как кроме Вас его никто не использует и не знает о чем вы вообще.

Answer 3

[rinatoptimus]

Кароч, вот так сделал:
.map-teaser-container {
width: 100%;
background: url(../img/bg-map-teaser.jpg) no-repeat;
background-size: contain;
max-height: 861px;
position: relative;
margin: 0 auto;
padding-top: 47%;
background-position: center;
}
.wave {
//margin-top: -8px;
//position: absolute;
width: 100%;
//height: 323px;
background: url('../img/wave.jpg') no-repeat;
background-size: contain;

max-height: 861px;
position: relative;
padding-top: 17%;
background-position: center;
}

Comments

[Евгений]

к слову, комментирование в css происходит с помощью /* тут закомментировано */