Jump to content
  • 0

Не скрывается блок


yaparoff
 Share

Question

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

 

Edited by yaparoff
Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By WNSY
      Более опытные товарищи, ай нид ё хелп!)
      Имеется выпадающее меню с классом .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; }  
    • By Владимир Горинов
      Добрый день, что делаю не так? Глаза уже замылил себе пытаясь найти причину.
      Нужно сделать - спозиционировать картинки так, что бы центральная перекрывала все, а 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; }  
    • By Brodyaga337
      Поочему фон со звёздами не прячется под body у которого:
      body { background-color: #EDE8C9; position:relative; z-index: 2; font-family: "RobotoRegular", sans-serif; font-size: 16px;
    • By siemens1111@yandex.ru
      страница отображается во всех браузерах правильно, кроме chrome: баннера перекрывают выпадающее меню
      что не так для chroma?
      вот ссылка на страницу http://centrpol.com.ua/index.html
      прин-скрин прикрепил: слева во всех брайзерах верно, справа в Хроме не верно

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

      С z-index пробовал - не помогло, Пробовал z-index вместе с position:relative и без, но пока безрезультатно (( Помогите пожалуйста, кто может. Скриншот по ссылке:  Скриншот. 
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy