Меню на div'ах, перекрытие элементов

@Таня Слепнева · Регистрация: 02.09.2011

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

Я все со своими слоями...

Верстала меню - смысл такой - фон div-а - gif с прозрачностью (там где пункты меню), в этом диве другие дивы, которые и являются пунктами меню. Собственно пункты меню должны перекрываться слоем из парентового дива.

Верхний див, в котором дивы с менюшками.

CSS
1
2
3
4
5
6
7
8
9
div.top_menu_bg
{
position:relative;
overflow:hidden;
z-index: 9999;
width:931px;
height:118px;
background: #f8fbfc url('../img/bg/top_menu.gif') no-repeat center top;
}

див первой менюшки

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
div.top_menu_bt_1
{
position:relative;
overflow:hidden;
z-index: 1;
margin-left:25px;
width:95px;
height:26px;
text-align:center;
padding-top:10px;
float:left;
cursor:pointer;
}

Другими словами - http://www.teplo-sbit.ru/ - пункт меню "Главная" должен иметь закругленный левый верхний угол. В чем я опять накосячила? Люди добрые... научите глупую правильно работать...

@Alorian · 06.09.2011, 18:20

Нужно сделать так, чтобы блок был ниже фона родителя.

Теоретически если верить спецификации такое возможно:
http://www.w3.org/TR/CSS2/visu... ef-z-index

Stacking contexts are not necessarily related to containing blocks

На практике тоже можно добиться чтобы элемент был ниже фона родителя.

CSS
1
2
3
#asd1{width:100px; height:100px; background:#F00; position:relative; z-index:0;}
#asd2{width:100px; height:100px; background:#0F0; position:relative; left:10px;}/*position:relative можно убрать в этой стрке*/
#asd3{width:100px; height:100px; background:#00F; position:relative; z-index:-1; left:20px; top:20px;}

HTML5
1
2
3
4
5
<div id="asd1">
    <div id="asd2">
        <div id="asd3">aaaaaaa</div>
    </div>
</div>

Суть в том что для asd2 не задан z-index и для asd3 z-index отрицателен.

Но тем не менее, пусть это возможно и разрешено мне такое решение не нравится. Слишком громоздкое и ненадежное. Если уж реализовать круглые уголки перекрытием сверху, то лучше сделать два дива рядом, верхний по коду — само меню, нижний — с фоном, а потом сдвинуть нижний на верхний так чтобы он его закрыл. Да и тоже мне как-то не очень нравится.

@Таня Слепнева · 06.09.2011, 20:18 **[ТС]**

Теоретически все верно, но у себя в коде все равно не могу понять где ошибка... Вроде родительский див имеет наивысший z-index, а все равно дочерние дивы его перекрывают...

@Alorian · 06.09.2011, 20:45

Сообщение от Таня Слепнева

Теоретически все верно

Где верно то? Вообще разная структура.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <div class="top_menu_bg">
    <div class="top_menu_elem"></div>
    <div class="top_menu_bt_1 grd1">Главная</div>
    <img src="/img/null.gif" class="ts" alt="">
    <div class="top_menu_bt_2 grd0">Магазин</div>
    <img src="/img/null.gif" class="ts" alt="">
    <div class="top_menu_bt_3 grd0">Как оформить заказ?</div>
    <img src="/img/null.gif" class="ts" alt="">
    <div class="top_menu_bt_4 grd0">Доставка и оплата</div>
    <img src="/img/null.gif" class="ts" alt="">
    <div class="top_menu_bt_5 grd0">О магазине</div>
    <img src="/img/null.gif" class="ts" alt="">
    <div class="top_menu_bt_6 grd0">Контакты</div>
  </div>

и

HTML5
1
2
3
4
5
<div id="asd1">
        <div id="asd2">
                <div id="asd3">aaaaaaa</div>
        </div>
</div>

@Таня Слепнева · 06.09.2011, 20:59 **[ТС]**

Да а толку-то?

HTML5
1
2
3
4
5
6
<div class="top_menu_bg">
<br><br><br><br><br>
    <div style="position:relative;">
        <div class="top_menu_bt_1 grd1">Главная</div>
    </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
div.top_menu_bg
{
position:relative;
overflow:hidden;
z-index: 0;
width:931px;
height:118px;
background: #f8fbfc url('../img/bg/top_menu.gif') no-repeat center top;
}
 
div.top_menu_bt_1
{
position:relative;
overflow:hidden;
z-index:-1;
margin-left:25px;
width:95px;
height:26px;
text-align:center;
padding-top:10px;
float:left;
cursor:pointer;
}

Без изменений!

@Alorian · 06.09.2011, 21:22

Мда, последний раз попробую объяснить и хватит.
Три дива вложено друг в друга если ты именно это решение все таки выбрала.
Первый див создает отдельный контекст форматирования. Он нужен только для z-index:0
Второй содержит фон.
Третий содержит меню.

Второй в итоге будет над третьим. У тебя второй оказывается над третьим, но стилей то у него никаких нет. Фон у тебя применен к первому, который так и остается внизу.

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

@Таня Слепнева · 06.09.2011, 22:16 **[ТС]**

Да не работает Ваш код с изображением.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div style="position:relative;z-index:0;width:931px;height:118px;">
    <div style="width:931px;height:118px;background: #f8fbfc url('../img/bg/top_menu.gif') no-repeat center top;">
        <div style="position:relative; z-index:-1;">
 
            <div class="top_menu_bt_1 grd1">Главная</div><img src="/img/null.gif" class="ts" alt="">
            <div class="top_menu_bt_2 grd0">Магазин</div><img src="/img/null.gif" class="ts" alt="">
            <div class="top_menu_bt_3 grd0">Как оформить заказ?</div><img src="/img/null.gif" class="ts" alt="">
            <div class="top_menu_bt_4 grd0">Доставка и оплата</div><img src="/img/null.gif" class="ts" alt="">
            <div class="top_menu_bt_5 grd0">О магазине</div><img src="/img/null.gif" class="ts" alt="">
            <div class="top_menu_bt_6 grd0">Контакты</div>
        </div>
    </div>
</div>

Фон второго дива перекрывает кнопки... к сожалению.

Добавлено через 10 минут
С фоном работает, а с изображениями -- нет. Либо я не могу Вас понять.

@Alorian · 06.09.2011, 22:28

Сообщение от Таня Слепнева

С фоном работает, а с изображениями -- нет. Либо я не могу Вас понять.

Скорее всего второе

Третий див оказывается под вторым. Если в фоне есть дырка то он оттуда будет выглядывать. Если дырки нет то соответственно второй див будет его полностью заслонять. Этот способ работает только с изображением у которого есть прозрачная часть. background-color должно быть не установлено либо в значении transparent.

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

@Таня Слепнева · 06.09.2011, 22:30 **[ТС]**

Хмм... методом научного тыка начало получаться...

Да, "дырка" есть

Vovan-VE · 07.09.2011, 16:28

Нельзя засунуть курицу в яйцо, чтобы скорлупа была поверх курицы.

@Таня Слепнева · 07.09.2011, 18:46 **[ТС]**

Сообщение от Vovan-VE

Нельзя засунуть курицу в яйцо, чтобы скорлупа была поверх курицы.

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

))) Поэтому пришлось немного переделать, костыльно вышло, но на более совершенное решение пока времени нет.

Спасибо всем за помощь! Чует мое сердце, не раз еще напишу в этом форуме!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Таня Слепнева 5 / 5 / 1 Регистрация: 02.09.2011 Сообщений: 43
	06.09.2011, 20:18 [ТС]
	Теоретически все верно, но у себя в коде все равно не могу понять где ошибка... Вроде родительский див имеет наивысший z-index, а все равно дочерние дивы его перекрывают... 0

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	06.09.2011, 21:22
	Мда, последний раз попробую объяснить и хватит. Три дива вложено друг в друга если ты именно это решение все таки выбрала. Первый див создает отдельный контекст форматирования. Он нужен только для z-index:0 Второй содержит фон. Третий содержит меню. Второй в итоге будет над третьим. У тебя второй оказывается над третьим, но стилей то у него никаких нет. Фон у тебя применен к первому, который так и остается внизу. Не зря же я код в первом сообщении привел который от всего лишнего очищен. Надо было в браузер вставить его отдельно и посмотреть что там происходит. 1

@Таня Слепнева 5 / 5 / 1 Регистрация: 02.09.2011 Сообщений: 43
	06.09.2011, 22:30 [ТС]
	Хмм... методом научного тыка начало получаться... Да, "дырка" есть 0

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	07.09.2011, 16:28
	Нельзя засунуть курицу в яйцо, чтобы скорлупа была поверх курицы. 0