Абсолютное позиционирование блока

@tgarl · Регистрация: 15.02.2012

Студворк — интернет-сервис помощи студентам

Есть блок с меню, он спозиционирован абсолютом к самому верху. При прокрутке страницы он остается виден. Тут вопросов нет. Но в соседнем диве, на странице есть блок(подменю), который должен при маленьком разрешении попасть туда же.
Я сделал иконку что при max-width: 480px блок скрывается, иконка проявляется и авсолютом прилепает на верх, но когда начинаешь прокручивать страницу иконка с меню улетает за пределы экрана. если поставить фиксид, то на мобильнике она при прокрутке начинает прыгать, хотя в браузере отображается нормально. Как можно решить такую задачу?

@boilzzz · 22.09.2016, 21:15

tgarl, Может вы код покажите? как мы угадаем в чем у вас проблема, по не большому абзацу...

@tgarl · 23.09.2016, 18:12 **[ТС]**

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

а вот как с такой быть ситуацией:
есть примерная структура кода менюшка, под ней селект
2 уровень меню class="a4" всплывающий блок с абсолютом
должен перекрывать собой полностью jq-selectbox, но в свою очередь jq-selectbox__dropdown должен перекрывать собой class="a1"

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="a1" >
    <div class="a2">
        <ul class="a3"><li><a href="#">11</a>
            <ul class="a4"><li><a href="#">222</a></li></ul></li>
        </ul>
    </div>
</div>
 
<div class="jq-selectbox jqselect val_region changed" style="display: inline-block; position: relative; z-index: 50;">
<select  class="val_region" style="margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0;">                 
            <option value="3707" selected="selected">Центр</option></select>
<div class="jq-selectbox__select" style="position: relative"><div class="jq-selectbox__select-text" style="width: 197px;">Центр</div>
<div class="jq-selectbox__trigger"><div class="jq-selectbox__trigger-arrow"></div></div></div>
<div class="jq-selectbox__dropdown" style="position: absolute; display: none; height: auto; top: 33px; bottom: auto;">
    <ul style="position: relative; list-style: none; overflow-y: auto; overflow-x: hidden; max-height: 348px;"><li class="sel selected" style="display: block; white-space: nowrap;">Центр</li></ul>
</div></div>

т.е. образно говря если все представить блоками
блок 1 в нем блок 2
блок 3 в нем блок 4
блок 2 должен быть выше блока3, но блок 4 выше блока 1

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@tgarl 467 / 431 / 117 Регистрация: 15.02.2012 Сообщений: 1,947

	Абсолютное позиционирование блока 22.09.2016, 19:02. Показов 1417. Ответов 2 Метки нет (Все метки) Есть блок с меню, он спозиционирован абсолютом к самому верху. При прокрутке страницы он остается виден. Тут вопросов нет. Но в соседнем диве, на странице есть блок(подменю), который должен при маленьком разрешении попасть туда же. Я сделал иконку что при max-width: 480px блок скрывается, иконка проявляется и авсолютом прилепает на верх, но когда начинаешь прокручивать страницу иконка с меню улетает за пределы экрана. если поставить фиксид, то на мобильнике она при прокрутке начинает прыгать, хотя в браузере отображается нормально. Как можно решить такую задачу? 0

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,057
	22.09.2016, 21:15
	tgarl, Может вы код покажите? как мы угадаем в чем у вас проблема, по не большому абзацу... 0

Абсолютное позиционирование блока

Решение