Search the Community

Более опытные товарищи, ай нид ё хелп!) Имеется выпадающее меню с классом .sub-menu__list. При наведении оно выпадает, но перекрывается блоком .page__main. Для наглядности прикрепляю скрин и код. Естественно, нужно, чтобы выпадающее меню было поверх контента следующего блока. Подскажите, как это реализовать? P.S. Если нужно поиграть с z-index, подскажите в каком классе, т.к. я перепробовал свои варианты - результата не дало. HTML <header class="header"> <div class="header__all _container"> <div class="header__image"> </div> </div> <div class="header__container _container"> <a href="#" class="header__logo"><img src="img/SL-logo.png" alt="SL"></a> <nav class="header__menu menu"> <ul class="menu__list"> <li class="menu__item"> <a href="#" class="menu__link">Главная</a> </li> <li class="menu__item"> <a href="#" class="menu__link">Обучение</a> <ul class="sub-menu__list"> <li class="sub-menu__item"><a href="#" class="sub-menu__link">Направления</a></li> <li class="sub-menu__item"><a href="#" class="sub-menu__link">Стоимость</a></li> <li class="sub-menu__item"><a href="#" class="sub-menu__link">Расписание</a></li> </ul> </li> <li class="menu__item"> <a href="#" class="menu__link">О нас</a> </li> <li class="menu__item"> <a href="#" class="menu__link">Контакты</a> </li> <li class="menu__item"> <a href="#" class="menu__link">Доп.услуги</a> </li> </ul> </nav> <a href="#" class="header__phone"><img src="img/header-phone.png" alt="h-phone"></a> </div> </header> <main class="page"> <div class="page__container _container"> <div class="page__main"></div> CSS .header { } .header__all + ._container { position: relative; } .header__image { background: grey; background-size: cover; height: 302px; font-size: 48px; text-align: center; } /*=======================================HEADER-NAV=======================================*/ .header__container { display: flex; min-height: 110px; align-items: center; margin: 15px auto 0 auto; position: absolute; } .header__logo { } .header__menu { margin: 0 0 0 95px; } .menu { } .menu__list { display: flex; } .menu__item { position: relative; } .menu__item:not(:last-child) { margin: 0 68px 0 0; } .menu__link { font-size: 20px; } .header__phone { margin: 0 0 0 175px; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~SUB-MENU~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ .sub-menu__list { display: none; position: absolute; } .sub-menu__item { width: 204px; } .sub-menu__item:first-child { padding: 40px 0 0 0; } .sub-menu__link { font-size: 18px; max-width: 204px; } .sub-menu__item:not(:last-child) { margin: 0 0 22px 0; } .menu__item:hover .sub-menu__list { display: block; } /*=======================================MAIN=======================================*/ .page { } .page__container { } .page__main { background: rgba(203, 32, 218, 0.25); height: 300px; font-size: 48px; text-align: center; }

Задумка такая: форма выдвигается/задвигается за хедер. Но у меня когда она двигается она "проползает" сверху хедера. А по идее должна ползти под хедером, и ее не должно быть видно когда она ползет Попробовал решить это с помощью z-index - почему то не помогло Что делать?

Добрый день, что делаю не так? Глаза уже замылил себе пытаясь найти причину. Нужно сделать - спозиционировать картинки так, что бы центральная перекрывала все, а 2 боковые были за родительским блоком и за центральной картинкой Тык А получается только вот так - 2 боковые позади центральной, но не могу их поставить позади родителя - Тык Либо подскажите как грамотно оформить этот блок с будущим нацеливанием на адаптивность. <div class="row"> <div class="col"> <div class="services-boxes"> <div class="services-boxes_first-box"> <img class="services-boxes_first-box__first-house" src="img/first_house.png" alt=""> <img class="services-boxes_first-box__second-house" src="img/second_house.png" alt=""> <img class="services-boxes_first-box__third-house" src="img/third_house.png" alt=""> <h3>Мечтаете о доме на Солнечном берегу?</h3> <p> Или хотите выгодно инвестировать в заграничную недвижимость? В любом случае - подходящий вариант уже ждет Вас! Большой выбор объектов жилой и коммерческой недвижимости и профессиональный сервис позволит провести сделку с удовольствием и получить нужный результат </p> </div> <!-- /.services-boxes_first-box --> </div> <!-- /.services-boxes --> .services-boxes_first-box { background-color: #f4f4f4; width: 74%; margin: auto; padding: 70px 0 43px 0; padding-left: 50px; padding-right: 50px; margin-top: 150px; position: relative; z-index: 4; } .services-boxes_first-box__first-house { display: block; position: absolute; left: -183px; top: -67px; right: 0; margin-left: auto; margin-right: auto; z-index: 1; } .services-boxes_first-box__second-house { display: block; position: absolute; left: 0px; top: -124px; right: 0; margin-left: auto; margin-right: auto; z-index: 100; } .services-boxes_first-box__third-house { display: block; position: absolute; left: 0px; top: -53px; right: -148px; margin-left: auto; margin-right: auto; z-index: 2; } .services-boxes_first-box h3 { font-size: 20px; text-transform: uppercase; } .services-boxes_first-box p { font-family: "Museo Sans Cyrl-100"; font-size: 17px; font-weight: 400; line-height: 25px; padding-top: 13px; }

Поочему фон со звёздами не прячется под body у которого: body { background-color: #EDE8C9; position:relative; z-index: 2; font-family: "RobotoRegular", sans-serif; font-size: 16px;

страница отображается во всех браузерах правильно, кроме chrome: баннера перекрывают выпадающее меню что не так для chroma? вот ссылка на страницу http://centrpol.com.ua/index.html прин-скрин прикрепил: слева во всех брайзерах верно, справа в Хроме не верно

Народ, всем привет! Есть сайт: http://handmademania.ru/b2b/ Щелкаем пункт верхнего меню "Расчёт заказа". Нас прокручивает вниз к анкете. Так вот, в ячейке "Мастер-классы, которые вы выбрали" я сделал список с мультивыбором. Проблема в том, что список большой,и он пересекается с кнопкой "Отправить". А если надо выбрать элемент списка, который на одном уровне с кнопкой, то кнопка становится на переднем плане, а мне надо, чтобы на переднем плане был выпадающий список. С z-index пробовал - не помогло, Пробовал z-index вместе с position:relative и без, но пока безрезультатно (( Помогите пожалуйста, кто может. Скриншот по ссылке: Скриншот.

В макете нужно реализовать наложение картинки на меню, но хотелось бы при этом оставить элементы меню доступными для клика полностью, а не частично. Сейчас реализовано так, что доступна только верхняя часть кнопки https://arthurmiko.github.io/shadows_portfolio/ Здесь воспроизведена подобная ситуация и вопрос относительно этого случая. Можно ли как-то оставить серые блоки доступными для курсора, в области их перекрытия синим блоком? Наверняка это можно реализовать с помощью JS, но есть ли способ обойтись HTML/CSS?

Доброго времени суток, сегодня начался рабочий день и я продолжил свою работу по web проекту, но вот наткнулся на одну проблему. Есть модальное окно при открытии которого появляется форма отправки сообщений, и решил я на одной странице добавить картинкам (в постах) прозрачности (css opacity) добавил эффект плавного изменения прозрачности для hover этой картинки и все бы хорошо, но при открытии модального окна картинка вылазит на перед этого окна (как будто кто то дописал z-index:99999;) при чем если убрать свойство opacity у картинки то при открытии модального окна все отображается нормально! Что это может быть? http://test.sud-expertiza.dp.ua/available-properties.html - ссылка на страницу теста. По нажатию на Contact вылазит модальное окно и вы сможете увидеть эту неприятность. У меня Chrome на предмет других браузеров не смотрел.

http://jsfiddle.net/tr0zurq1/ Предполагается, что тень будет именно для каждого элемента: либо для <li>, либо для <a>, а не для <ul>. По-идее, между элементами тень не должна быть видна, поскольку, z-index псевдоэлемента, для которого сделана тень, меньше z-index'a элемента, для которого сделан псевдоэлемент. Но тень всё равно есть. Почему? Как расположить тень "дальше" пунктов меню? <ul> <li><a href="#">Борщ украинский с пампушками</a></li> <li><a href="#">Вареники с печенью в луке с салом</a></li> <li><a href="#">Курица, тушенная с галушками</a></li></ul>ul { position: absolute; list-style: none; margin: 0; padding: 0; word-wrap: break-word; /*перенос слов*/ z-index: 0; }ul a { display: block; position: relative; z-index: 1; background: #ffe5e5; color: #ca575b; padding: 5px 10px; text-decoration: none; }ul a:hover { background: #8bc6ee; color: #fffcfc; }ul a::after { content: ''; display: block; position: absolute; top: 0; bottom: 0; left:0; right:0; box-shadow: 0 0 4px #dd9a9a; z-index: -1; }

Добрый день. Подскажите пожалуйста как сделать чтобы Колеса от фона хедера были сверху остальных полей. z-index не работает. Сайт arlekin.su. чтобы поднять слайдер до нужной высоты я использовал маргин-топ - 50 в .front_slider_wrapp {. Очень прошу помочь, или хотябы направить в нужную сторону.

Добрый вечер форумчане. Столкнулся с такой проблемой. Никак не получается наложить полупрозрачный фон на изображение. Пример можно посмотреть здесь http://rezka.plasmainfo.ru. Заранее спасибо за ответы.

Здравствуйте!Подскажите пожалуйста. Попробовал наложить форму подписки от Jastclick (форму сделал полупрозрачной) на рисунок. Все получилось, но есть засада... Рисунок я могу двигать вверх-низ, вправо-влево, а форму подписки могу только двигать вправо-влево, а вверх-вниз не хочет! В чем может быть проблема? Подскажите пожалуйста. Проделываю это на своем блоге: free-pc.ru, там пока прежнюю форму оставил. Код прилагаю: <!-- Стиль вывода формы подписки JastClick (работа со слоями) --> <style>#layer1, #layer2, #layer3 {position: relative; /* Относительное позиционирование */} #layer2{top: -220px; /* Сдвигаем рисунок вверх */left: 90px; /* Сдвигаем рисунок вправо */} #layer1{top: 100; /* Сдвигаем форму вверх (Не работает, пробовал также и отрицательные значения) */left: 0px; /* Сдвигаем форму вправо (Работает) */} #layer1 { z-index: 3; }#layer2 { z-index: 1; }#layer3 { z-index: 2; }</style> <div id="sidebar"> <div class="marat-2"><div id="layer3"><p>Бесплатно получать <br /> статьи блога почтой:</p></div></div> <!-- Форма подписки выводится в верхнем слое --> <div id="layer1"> <!--Дальше идет код Формы подписки justclick.ru (добавил style=" background-color: rgba(132, 175, 201, 0.5) !important; (для прозрачности формы) --> </div> <!-- Рисунок выводится на заднем слое --> <div id="layer2"><img src="http://free-pc.ru/images/gerl/gerl3_3.jpg" alt="Подписаться"></div> </div>

Всем привет! Озадачился с проблемой(подробнее на картинке): Нюанс - Черепашка относится к Layer1 как одна общая картинка. Если Layer1 по z-index выше то я не могу нажать Button1 Если Layer 2 по z-index выше то черепахе голову обрубает)

Доброго времени суток Вот уже 2 день ломаю голову над решением проблемы с z-index. Хочу сделать выпадающее вниз краткое описание при навидении мышкой без JS, JQuery и прочих умных вещей). Только СSS. Вот куски кода: <style>.item{ width: 40%; position: relative; display: inline-block; background-color: #bbb; float: left;}.item:hover{ z-index: 5;}.short_desc{ display: none;}.item:hover .short_desc{ display: block;}</style><div class="item"> <h3>Rock Shox Domain 318 Coil 170</h3> <img src="img/items/1.jpg" /> <p><strong>Цена:</strong> <span>2555 грн.</span></p> <div class="short_desc"> Краткое описание<br /> <a href="">Buy</a> </div></div><div class="item"> <h3>Rock Shox Domain 318 Coil 180</h3> <img src="img/items/1.jpg" /> <p><strong>Цена:</strong> <span>2555 грн.</span></p> <div class="short_desc"> Краткое описание<br /> <a href="">Buy</a> </div></div>и т.д.Проблема в том, что при навидении на товар он все равно опускает нижние товары, хотя (по-моему) должен налезать на них. Если брать абсолютную позицию - блок с кратким описанием не наследует стилей родителя. Как быть? Буду очень благодарным за Вашу помощь.

Доброго дня всем. Возникла проблема с выпадающим меню на сайте http://izodecor.md , а точнее никак не удается выдвинуть меню вперед. z-index не помогает или я что-то не так делаю (я новичок в этом) хотя сам DIV с меню располагается внутри "злого" DIV-а который и перекрывает меню . Устал биться - перечитал с полсотни постов и так ничего и не понял - прощу помощи. Не сплю уже вторые сутки и мозг просто не выдержит еще даже 10 страниц чтива. Подозреваю, что проблема кроется в "overflow: hidden" но самостоятельно не догоняю, где чего исправить. В общем - HELP!

Есть пример-задача: http://jsfiddle.net/realovich/r4wdA/ В ней блок с классом "red" с помощью трансформации создает новый контекст наложения. Если присвоить любую трансформацию к блоку с классом "green" - этот блок попадает в тот же контекст, что и red, а вот img даже с трансформацией не хочет попадать в этот же контекст. Помогите, CSS-гуру.

вот сайт geometrica.biz в хедере есть логотип и два блока меню. Проблема состоит в том что логотип налаживается на два блока меню из-за этого они становяться неактивные. проблема в том что у логотипа стоит z-index выше чем у блоков меню, но я не знаю как это решить, помогите пожалуйста!

Всем привет! Вот хотел бы поинтересоваться как правильно сделать эту штуковину, на ум конечно приходит много идей, в том числе и разбиение логотипа на 2 части, но пока остановился на таком варианте, так как он мне кажется самым нормальным. http://jsfiddle.net/K7UV3/2/ З.Ы. - header и opol полностью статичны, в них ничего не тянется и текстом дополняться скорее всего не будет. В диве logo будет еще 2 дива. 1 для текста - имей дело с лучшими 2ой для названия компании. Хотя можно обойтись и без 2ух дивов, не столь важно. Opol - это див с бэкграундом-картинкой, внутри которого будут находиться еще 2 рекламных дива размеров 486х60 с низу. Вот для наглядности что планирую:

Есть меню с z-index:20; (и подменю с z-index:21) сразу после меню идет картинка с привязанной map-area (z-index:10); При наведений на меню выпадает подменю, но map-area перекрывает подменю, проблема только в сафари win7. http://i.imgur.com/UtQOqxw.jpg чтобы понятней было http://i.imgur.com/3EKM6Sy.jpg код

Друзья, проблема такая. Есть две кнопки для листания карусели вперёд и назад (.prev и .next), мне нужно их разместить за блоком #page, в котором эта карусель находится. Дизайнерская задумка такая, что тень от #page падает на эти блоки, а тень, отбрасываемая блоками, частично скрывается за блоком #page. То есть #page находится над .prev и .next. Но почему-то не получается у меня поместить эти стрелки в нужное место, в результате они сами отбрасывают свою тень на #page. То есть они находятся над контейнером, в который помещены, а не под ним, как мне это нужно. Танцы с бубном вокруг z-index и position мне не помогли.. Подскажите, вообще задача реальная стоит? И если реальная, как добиться нужного результата? В коде ниже есть ещё блок header, его у меня получилось над #page поставить. А вот с .prev и .next фиаско.. Помогите, пожалуйста, советом. <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>тест</title> <meta name="description" content="тест"> <style> body { background: #a1a1a1; margin:0;font-size:1em;line-height:1; } .wrapper { margin: 0 auto; padding: 0; width: 760px; position: relative; } header { position: fixed; top: 0; height: 30px; width: 100%; background: #54005c; box-shadow: 0 0 9px rgba(0,0,0,.32); overflow: hidden; z-index: 10; } #page { background-color: white; min-height: 800px; top: 30px; box-shadow: 0 0 9px rgba(0,0,0,.32); font-size: 14px; z-index: 3; } #panel { position: relative; top: 14px; background: #eee; height: 60px; } a.prev, a.next { position: absolute; background: #eee; z-index: 5; width: 40px; height: 60px; box-shadow: 0 0 7px rgba(0,0,0,.32); } a.prev { left: -40px; } a.next { right: -40px; } </style> </head> <body> <header> </header> <div id="page" class="wrapper"> <section id="panel"> <a class="prev" id="prev_btn1" href="#"><span>prev</span></a> <a class="next" id="next_btn1" href="#"><span>next</span></a> </section> </div> </body> p.s. Вёрстка только под современные браузеры.