Jump to content
  • 0

Как убрать тень между элементами?


Launder
 Share

Question

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;           }
Edited by Launder
Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0

Если у элемента позиционирование отличное от static и задан z-index, формируется новый контекст наложения, в котором этот элемент будет корневым.
Контекст, как стакан, дном которого служит корневой элемент, а все дочерние элементы располагаются внутри этого стакана в определенном порядке.
Элементы даже с отрицательным z-index не могут быть расположены за корневым элементом, и лежат на самом дне стакана.

В общем, нужно убрать у ссылок z-index

ul a {   z-index: auto;}
  • Like 1
Link to comment
Share on other sites

  • 0

Спасибо за столь наглядное объяснение, идея более-менее ясна: если элемент лежит внутри стекового контекста, он не может быть "ниже" родителя (корня стекового контекста), даже если у него z-index: -1000000;

Когда я назначаю свойство z-index: auto для <a>, то я вывожу <a> из стекового контекста, который я задал назначив z-index: 0 для моего списка <ul>.

Соответственно, тень между пунктами меню исчезает, поскольку <ul> перестаёт быть для неё элементом формирующим стековый контекст, а значит её элементы перекрывают тень, которая, имея свойство z-index: -1, скрывается за элементами <ul>, z-index которых равен нулю.

 

http://jsfiddle.net/Launder/tr0zurq1/3/

 

Но тогда почему тень от псевдоэлемента <a> должна быть меньше нуля, даже если я для <ul> назначил z-index: 1?

 

http://jsfiddle.net/Launder/tr0zurq1/4/

 

я закомментировал 31 строку, в котором задано свойство z-index для псевдоэлемента и тень между элементами <li> появилась снова. Более того, если я введу вручную z-index: 0 то тень между элементами никуда не исчезнет.

Вот я задал, с Вашей помощью, для элемента ul a свойство z-index: auto; Тем самым, как я понял, я вывел <a> из стекового контекста <ul>. Поскольку я задал для ul z-index равным единице, то, если считать z-index <a> равным нулю, по-идее, <a> вообще не должно выделяться, но оно выделяется. Значит z-index <a> должен быть не меньше единицы. По какому принципу назначается значение z-index: auto? Это первый вопрос.

И второй: если я задаю для псевдоэлемента, содержащего тень, z-index: 0, что явно меньше единицы, почему тогда тень между элментами отображается? Почему нужно именно отрицательное значение?

Значит я как-то не правильно понимаю логику. Не могли бы Вы её объяснить на этом конкретном примере?

Link to comment
Share on other sites

  • 0

Когда я назначаю свойство z-index: auto для <a>, то я вывожу <a> из стекового контекста, который я задал назначив z-index: 0 для моего списка <ul>.

 

Значение z-index, отличное от auto, создает новый контекст укладки. Поэтому неверно: элемент UL со свойством z-index: 0 по-прежнему создает этот контекст. А вот элемент A теперь никак не повлияет на свои псевдоэлементы, они будут укладываться относительно UL. А тень в данном случае "исчезает" просто потому, что фон установлен на A (попробуйте убрать background-color у элемента A на UL).

 

Но тогда почему тень от псевдоэлемента должна быть меньше нуля, даже если я для назначил z-index: 1?

 

Порядок укладки внутри одного контекста следующий:

  • корневой элемент;
  • позиционированный (со своими потомками) с отрицательным значением z-index;
  • не позиционированные элементы (появляются в том порядке, как определены в DOM);
  • позиционированные (и потомки) с z-index: auto;
  • позиционированные (и потомки) с положительным значением z-index.

То есть в данном случае получается, если вы поставите не отрицательное значение, то тень будет выше предыдущего в DOM'е элемента A, фон которого перекрывал до этого box-shadow.

 

 

По какому принципу назначается значение z-index: auto

 

Это значение по умолчанию.

Edited by Igor Schnaider
  • Like 2
Link to comment
Share on other sites

  • 0

А вот элемент A теперь никак не повлияет на свои псевдоэлементы, они будут укладываться относительно UL.

 

 

Вот оно что. Ну тогда более-менее ясно. :) Иными словами если бы у <a> было любое количество потомков, то они все бы были укладывались относительно <ul>, поскольку у <a> нет условий для создания своего стекового контекста.

Я про это свойство читал вот тут:

 

http://resources.webknowledge.ru/digests/css/property/z-index/

 

но про наследование, видимо, до конца не понял.

 

Кстати, если мы назначим <a> свойство overflow: hidden, то тень исчезнет, какой бы у неё не был z-index, ну, конечно, если тень не направлена внутрь. Это пожалуй, немного про другое, но я как-то долго не мог понять, куда исчезает мой псевдоэлемент, когда он выходит за границы родительского элемента, и искал где я нахимичил с z-index, а дело оказалось в overflow.

 

 

 

По какому принципу назначается значение z-index: auto

 

Это значение по умолчанию.

 

 

А оно всегда численно равно нулю?

Edited by Launder
Link to comment
Share on other sites

  • 0
А оно всегда численно равно нулю?

auto и 0 - не совсем одно и то же. Позиционированный элемент с установленным значением свойства z-index, отличным от auto, создает новый контекст наложения. По умолчанию - с auto - не создает.

 

upd. Неправильно понял сначала вопрос. Численно да, он равен нулю.

Edited by Igor Schnaider
  • Like 1
Link to comment
Share on other sites

  • 0

Видимо всё же, понял не до конца...

 

https://jsfiddle.net/Launder/q7vd9ghv/4/

 

У меня у <ul> (выпадающий список), z-index: 1; для его псевдоэлемента: z-index: auto; То есть, у него должен быть корневой контекст наложения и z-index должен быть численно равен нулю. Почему же <ul>, имеющий свой собственный фон и бОльший z-index, не перекрывает тень от псевдоэлемента?

Кстати, интересно как выделяется пункт меню <a> - фон меняется, но через фон, тень всё равно видна. Вроде фон не прозрачный.

Объясните, пожалуйста, данное явление...

Link to comment
Share on other sites

  • 0
.menu > li:hover > ul {    position: absolute; /* ранее определено */    z-index: 1;    display: block;}

Это значит, что ul создает контекст форматирования и псевдоэлемент позиционируется по z-оси уже относительно него.

 

UPD:

По второму вопросу. Это определено порядком отрисовки. Позиционированные потомки с z-index: auto или 0 будут выше, чем текст. Но ниже, если z-index меньше 0.

 

То есть, можно так написать:

 

    .menu ul::before {

        /* ... */

        z-index: -1;

    }

 

Тогда фон будет перекрывать его.

Edited by Igor Schnaider
Link to comment
Share on other sites

  • 0

Если честно, всё равно пока до конца не ясно. Поигрался немного с z-index результата не получил, помедетирую ещё позже...

 

Вот так работает, вроде, вполне себе не плохо:

 

https://jsfiddle.net/Launder/tmnnyo0L/4/

 

Постарался все сложные моменты в коде прокомментировать.

Если кому интересна тригонометрия, то её можно посмотреть тут:

 

http://htmlforum.ru/index.php?showtopic=49661#entry368125

 

ну и листик с карандашом Вам в помощь B)

Кому нужен треугольничек, чтобы поиграться, вот заготовка:

 

https://jsfiddle.net/Launder/2kzjq5em/1/

Link to comment
Share on other sites

  • 0
.menu > li:hover > ul {    position: absolute; /* ранее определено */    z-index: 1;    display: block;}

Это значит, что ul создает контекст форматирования и псевдоэлемент позиционируется по z-оси уже относительно него.

 

Ну так я же отменил это для псевдоэлемента, через указание ему z-index: auto, почему не сработало, не пойму?

Edited by Launder
Link to comment
Share on other sites

  • 0
Ну так я же отменил это для псевдоэлемента, через указание ему z-index: auto, почему не сработало, не пойму?

 

Еще раз, контекст позиционирование установлен на UL. Значит, псевдоэлемент располагается по z-оси относительно него, поэтому он никак не может быть под фоном списка.

 

Чтобы сделать, как вы хотите, нужно убрать этот контекст от UL. То есть, уберите z-index с UL, а для псевдоэлемента поставьте отрицательное значение z-index.

Link to comment
Share on other sites

  • 0

@Igor Schnaider, и, продолжая Вашу мысль, z-index следует выставить не для UL, а для .menu li - для того, чтоб он формировал свой контекст форматирования и был выше строчных элементов.

 

https://jsfiddle.net/Launder/q7vd9ghv/5/

 

Тогда и ul и его псевдоэлемент располагается в ОДНОМ контексте наложения и их взаимодействие может быть отрегулировано с помощью численного указания z-index (по-умолчанию они равны нулю, а сверху располагается то, что идёт в коде ниже). Если же ul формирует новый контекст наложения - то все его потомки, будут выше него.

Я почему-то понял сначала что z-index: auto выводит элемент из стекового контекста его предка, а, похоже, это не так. Если уж оказался в стековом контексте, то всё, приплыли :(

 

В общем с логикой z-index'a более-менее разобрались, осталось этот пример причесать, чтоб он был такой же как и сделанный немного другим способом:

 

https://jsfiddle.net...der/tmnnyo0L/4/

Link to comment
Share on other sites

  • 0

Кстати, в этом моём примере: https://jsfiddle.net...der/tmnnyo0L/4/ для элемента:

.menu > li:hover::after {z-index: 1;}

но даже если его убрать - ничего не изменится.

Почему?

Ведь псевдоэлемент имеет такое же позиционирование как и

.menu ul {position: absolute;}

так почему же псевдоэлемент, по-умолчанию, перекрывает .menu ul?

Получается псевдоэлемент, по-умолчанию, распологается в коде ниже?

Поменял два псевдоэлемента местами, назначил ::before -> ::after и наоборот, ничего не изменилось.

Link to comment
Share on other sites

  • 0

https://jsfiddle.net/Launder/q7vd9ghv/6/

 

А вот и второй вариант решения той же задачи.

В первом случае, мы все перестановки делали относительно главного меню (.menu li), а для (.menu li ul) сделали только сдвиг вниз, в этом же варианте, мы для (.menu li) сделали только прозрачную границу, для того, чтоб когда курсор мыши находится зоне действия меню, но не ромбике, меню не закрывалось. А псевдоэлемент делали уже для (.menu li ul). Кстати сдвиги в обоих вариантах отличаются, откуда они берутся - указано в комментариях к коду.

Интересно, какой вариант более концептуально правильный :)

Link to comment
Share on other sites

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 Алеся
      Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
      <div class="banner"> 
            <div class="container background-image">
            <div class="banner_text"></div>
            </div>
          </div>
      CSS:
      .background-image {
        background-image: url('/img/new_oranges.jpg');
        background-size: cover;
        height: 200px;
      }
    • By yaparoff
      Задумка такая: форма выдвигается/задвигается за хедер. Но у меня когда она двигается она "проползает" сверху хедера. А по идее должна ползти под хедером, и ее не должно быть видно когда она ползет
      Попробовал решить это с помощью z-index - почему то не помогло
      Что делать?
       
    • 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 gumuch
      Добрый день. Нуждаюсь в помощи/совете! 
      В корне сайта (html) создал блок с позиционированием, написал в нем номер телефона и почту. На большом мониторе блок отображается нормально, а вот если зайти через смартфон то данный блок налазит на картинку и я никак не могу это изменить..., игрался с позиционированием (absolute, fixed, relativ и т.д.) но получаю на выходе либо прикрепленный блок к верхнему левому краю либо он налазит на картинку. Подскажите, что я делаю не так? 
      Сам сайт: http://2metra.com/
      Вот код который я прописал:
       
×
×
  • 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