Использование псевдоэлемента в качестве прямоугольника на абсолютно позиционированном элементе - PullRequest
Новая
       6

Использование псевдоэлемента в качестве прямоугольника на абсолютно позиционированном элементе

0 голосов
/ 08 ноября 2018

Я использую автозаполнение пользовательского интерфейса jQuery в поле поиска на моем сайте.

Базовый CSS этого элемента «ui-autocomplete» уже устанавливает абсолютное значение позиции, а z-index - 700 (слева и справа оба равны 0). Я НЕ хочу изменять этот файл, так как он будет мешать размещению элемента автозаполнения.

Я хочу добавить креативную рамку-тень, чтобы отделить этот элемент от остальной части сайта, но каждый увиденный мной урок, в котором используются псевдоэлементы до и / или после, устанавливает для родителя положение относительное, и псевдоэлементы к абсолюту.

Есть ли способ правильно перекомпоновать z-индекс псевдоэлементов, когда родитель и потомок абсолютно позиционированы?

Вот пример: 

.foo {
   position: absolute;
   width: 300px;
   height: 300px;
   background: #fff;
   top: 50px;
   left: 50px;
   z-index: 700;
}

.foo::before, .foo::after {
   position: absolute;
   content: '';
   bottom: 0;
   width: 96%;
   height: 1%;
   left: 2%;
   z-index: -1;
   box-shadow: 0 0 40px 13px #486685;
   border-radius: 100px/5px;
}
<div class="foo">This is my Div</div>

К сожалению, при использовании этого метода псевдоэлементы отображаются НАД родительским элементом div, а не под ним - чего я и пытаюсь достичь.

...