У меня есть div, отображающий в шапке сайты lo go. Мне нужно добавить часть кода над этим изображением. Я сделал это, используя абсолютное позиционирование, и это вроде как работает. Вот мой jsfiddle . Я не знаю, как показать изображение в jsfiddle, поэтому я просто использовал окно. В режиме рабочего стола (выше 400px) окно выпадающих меню показывается примерно так, как я хочу (поверх изображения). Но в мобильном режиме окно по-прежнему отображается поверх изображения, поэтому изображение становится видимым лишь частично.
Вот сайт Я пытаюсь подражать. Я не думаю, что он использует абсолютное позиционирование, поскольку баннер не изменяет размеры вместе с окном. Я предполагаю, что это два div рядом друг с другом, так как в мобильном представлении, коробки появляются под баннером, но над следующим div. Это то, что я хотел бы иметь в своем мобильном представлении.
Поэтому мне нужно, чтобы поле было поверх изображения на рабочем столе и было отзывчивым, но ниже изображения в мобильном представлении. Я думал о добавлении второго div и изменении отображения на none для одного div и блоку для другого, но это, похоже, много лишнего кода для поддержки. Это способ делать то, что я хочу, или есть лучший способ? Код в моем примере ниже.
ОБНОВЛЕНИЕ: я выполнил поиск, используя два div рядом для настольных компьютеров и сложил их для мобильных устройств, и нашел много постов на этом сайте для этого. Я перепробовал довольно много, но единственный, который работал, был первый ответ на на этой странице @Morpheus. Я бы предпочел абсолютное позиционирование, поскольку это обеспечивает лучший фон, но это делает большую часть того, что я хочу.
