Более высокий индексный индекс, не перекрывает нижний индекс z

Почему box2 не перекрывает ящик1 под ним, когда он имеет более высокий индекс z, чем box1?Более высокий индексный индекс, не перекрывает нижний индекс z

.box1 { 
 
     height: 30px; 
 
     width: auto; 
 
     z-index: 1; 
 
     position: relative; 
 
    } 
 
    .box2 { 
 
     position: absolute; 
 
     height: 20px; 
 
     border: 1px solid red; 
 
     background-color: white; 
 
     z-index: 2; 
 
    }

<div class='box1'> 
 
    Just a box 
 
    <div class='box2'>Should overlap</div> 
 
</div> 
 

 
<div class='box1'> 
 
    Why is this not partially hidden? 
 
</div>

Вот скрипка: http://jsfiddle.net/k7m4y42L/ И еще один, который напоминает мою HTML структуру: http://jsfiddle.net/1nv8fd93/

источник

2015-07-17 Adam Baranyai

Потому что он вложен внутри коробки, которая является одним и тем же lvl. – timo

Допустимо ли, если вы положили 'top: 0' в' box2'? – nelek

Вы даете box2 Z-индекс, что это выше, чем z-index из box1, но так как вы выразились ВНУТРИ box1, то z-index получает сброс в некотором роде.

Это означает, что все, что вы даете z-index < 2 INSIDE a box1 спрятано под box2.

Эта проблема может быть решена двумя способами: чистым CSS или с jQuery.

CSS

В CSS, это легко: просто изменить z-index из box1 по наведению, например, так:

.box1:hover { 
    z-index: 3; 
}

Это сделает текущий box1 вы зависший над имеют более высокий z-index чем другой box1 s на странице. Я добавил небольшой hover -эффект на box2, чтобы получить немного больше конечного продукта, который вы хотите.

Работа fiddle

JQuery

В JQuery это немного сложнее, чем это необходимо, но результат такой же, как и выше (я бы для решения CSS). Кусок кода ниже делает следующее:

При наведении указателя мыши на .box1, он добавляет z-index: 3 к этому конкретному box1, но только если она содержит DIV с классом box2.

JQuery

$('.box1').mouseover(function() { 
    $(this).has(".box2").css('z-index', 3); 
});

Работа fiddle.

В некотором роде, вышесказанное является очень сложным :hover -эффектом. Только после этого решения я подумал о добавлении :hover на box1 и адаптации z-index. Но так как это может быть полезно для некоторых (вероятно, нет), я оставил его в ответе.

источник

2015-07-17 11:49:36 Rvervuurt

Можно ли добиться такого же поведения с использованием только двух классов? –

Ну, вам нужно, чтобы весь «box1» перекрывал «box3» (из моего примера), так что да. Просто дайте 'box3' более низкий' z-index', чем 'box1'. 'box2' здесь совершенно не нужен. – Rvervuurt

Ну, в моем случае, который не будет: | То, что я пытаюсь достичь, показывает список значков (box1), и когда пользователь наводится над одним из значков, появляется сообщение (box2), которое перекрывает значок под ним: | –

Вам нужно установить правило top, потому что абсолютный "box2" является относительно " ящик1 "

.box1 { 
    height:30px; 
    width: auto; 
    z-index:1; 
    position:relative; 
} 

.box2 { 
    position: absolute; 
    height: 20px; 
    border:1px solid red; 
    background-color:black; 
    z-index:2; 
    top:0px; /* Set this rule */ 
}

DEMO HERE

источник

2015-07-17 11:48:45

Да, но чего я хочу достичь, это то, что box2 внутри box1, должен пересекать КАЖДОЕ поле1, даже тот, который ниже него. Это возможно как-то? –

Что бы я делал в вашем случае, это использовать jquery для создания этих всплывающих подсказок, а не пытаться сделать это в css. Theres простая демонстрация Simple Tooltip with jQuery или еще лучше, используйте что-то вроде qTip, что делает более красивые версии.

источник

2015-07-17 12:39:42

Более высокий индексный индекс, не перекрывает нижний индекс z

ответ

Смежные вопросы