2

Не могу понять почему не получается псевдо-элемент :after спрятать под родительский блок.

html

<ul class="dropdown-menu" aria-labelledby="dropdownTopMenu">
   <li><a href="#">Action</a></li>
   <li><a href="#">Another action</a></li>
   <li><a href="#">Something else here</a></li>
   <li><a href="#">Separated link</a></li>
   <li><a href="#">Separated link</a></li>
   <li><a href="#">Separated link</a></li>
</ul>

css

.dropdown-menu {
                    position: absolute;
                    left:          50px;
                    top:           50px;
                    right:         initial;
                    width:         210px;
                    border:        1px solid #E7E7E7;
                    border-radius: 3px;
                    padding:       30px;
                    z-index:      5;
                    &:before {
                        width:        0;
                        height:       0;
                        border-style: solid;
                        border-width: 0 8.5px 10px 8.5px;
                        border-color: transparent transparent #FFFFFF transparent;
                        position:     absolute;
                        display:      table;
                        content:      ' ';
                        top:          -9px;
                        left:         50%;
                        margin-left:  -10px;
                        z-index:      10;
                    }
                    &:after {
                        width:        0;
                        height:       0;
                        border-style: solid;
                        border-width: 0 9.5px 12px 9.5px;
                        border-color: transparent transparent #E7E7E7 transparent;
                        position:     absolute;
                        display:      table;
                        content:      ' ';
                        top:          -10px;
                        left:         50%;
                        margin-left:  -11px;
                        z-index:      -1;
                    }
                }

http://jsfiddle.net/To_wave/d9L5h0ws/

Есть какие-нибудь мысли по этому поводу?

1
  • Подключи бутстраповские стили в jsfiddle.
    – Qwertiy
    Commented 18 сент. 2015 в 1:04

1 ответ 1

1

Если верно, что вы пытаетесь спрятать :after под его котейнер, то разочарую - так сделать не получится. Элемент может быть под контентом его родителя но не под самим родителем. Если так нужно спрятать этот треугольник по дизайну, добавьте контейнер рядом с :after, тогда вы сможете поднять или опустить его.

https://stackoverflow.com/questions/4456234/cant-get-z-index-to-work-for-div-inside-of-another-div

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.