Плавающее Div над Абсолютным Позиционируемым Div

Question

Я пытаюсь достичь этого: Изображение шириной 1000px и 350px tall в левой части экрана. Захват электронной почты, который находится справа от экрана. Я хочу, чтобы ящик электронной почты сидел над частью изображения на 1024px, 1200px и т. Д., Но когда экран расширяется (или просматривается на больших экранах), я хочу, чтобы двое дрейфовали друг от друга, а затем остановились на максимальной ширине. Я считаю, что я достиг этой части процесса.

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

У меня есть эта настройка теперь как изображение с абсолютным расположением и плавающий div, проходящий через него с максимальной шириной для содержащего div, который содержит два. Но с абсолютным размещением плавающий div не скользит ниже абсолютного размещенного изображения сразу, а как-то рывками назад и вперед между левой и правой сторонами экрана и, наконец, заканчивается поверх изображения ...

http://new.healthcareexcellence.org/

Answer 1

position: absolute; на изображении контейнера .home-featured-left является виновником.

Вам просто нужно «отключить» абсолютное позиционирование, когда это не требуется (как только вы нажмете маленькие размеры экрана). Есть много способов, вы можете идти об этом, но самый простой способ это просто добавить следующее:

.home-featured-left { 
    position: static; 
} 

в медиа-запрос для небольших размеров экрана: @media only screen and (max-width: 960px)