CSS фон тень на DIV действует отличается от соседнего DIV

Question

Так что у меня эти две дивы сидят рядом друг с другом инлайн

http://jsfiddle.net/A5Jc7/60/

HTML:

<div> 
    <div class="box1"></div> 
    <div class="box2"></div> 
</div> 

CSS:

.box1 { 
    width:200px; 
    min-height:200px; 
    background:blue; 
    float:left; 
    margin:20px 0 0 0; 
} 
.box1:hover { 
    background: white; 
    box-shadow: 0px 0px 5px 5px #888888; 
    height:200px; 
    margin:20px 0 0 0; 
} 
.box2 { 
    width:200px; 
    min-height:200px; 
    background:blue; 
    float:left; 
    margin:20px 0 0 0; 
} 
.box2:hover { 
    background: white; 
    box-shadow: 0px 0px 5px 5px #888888; 
    height:200px; 
    margin:20px 0 0 0; 
} 

Я нависаю над левым div, и я получаю тень, которая находится под правом div. Я нависаю над правым div, а тень - над левым div. Почему это так? Я хочу, чтобы тени были одинаковыми. Я пробовал трюки z-index, но это, похоже, не работает. Есть идеи?

Answer 1

Z-index работает только для элементов, которые абсолютно или относительно расположены.

Затем добавьте следующие строки в каждой коробке:

position:relative; 

И следование парит:

z-index:1; 

Если вы хотите тени быть позади родительского объекта, просто использовать :

z-index:-1; 

Пример: http://jsfiddle.net/charlescarver/A5Jc7/64/

Таким образом, вам не нужно использовать нечетные z-индексы или абсолютное положение полей, для которых требуется еще больше CSS для правильного стиля.

Answer 2

http://jsfiddle.net/A5Jc7/65/

.box1{ 
    width:200px; 
    min-height:200px; 
    background:black; 
    float:left; 
    margin:20px 0 0 0; 
    z-index: 1; 
    position: relative; 
} 

.box1:hover{ 
    background: white; 
    box-shadow: 0px 0px 5px 5px #888888;  
    height:200px; 
    margin:20px 0 0 0; 
    z-index:2; 
} 

добавлен позиционирование и Z-индекс по наведению к обоим пунктам.

Answer 3

Поскольку смещение вашей тени покрывают первый блок,

Если изменить позицию х во второй коробке тени как box-shadow: 5px 0px 5px 5px #888888; вы сделали.

Но если вы хотите сохранить симметрию, вы должны изменить первую тень смещение также box-shadow: -5px 0px 5px 5px #888888;

Answer 4

Вы можете использовать абсолютное позиционирование, чтобы сделать г-индексный работу должным образом.

.box0 { 
position:relative; 
width:400px; 
height:200px; 
} 

.box1{ 
width:200px; 
min-height:200px; 
background:black; 
position:absolute; 
margin:20px 0 0 0; 
z-index: 1; 
left:0; 
top:0  
} 

.box1:hover{ 
background: white; 
box-shadow: 0px 0px 5px 5px #888888;  
height:200px; 
margin:20px 0 0 0; 
    z-index:5 
} 

.box2{ 
width:200px; 
min-height:200px; 
background:black; 
position:absolute; 
margin:20px 0 0 0; 
z-index:1 
z-index: 1; 
right:0; 
top:0   
} 

.box2:hover{ 
background: white; 
box-shadow: 0px 0px 5px 5px #888888; 
height:200px; 
margin:20px 0 0 0; 
    z-index:5 
} 

Answer 5

Использование z-index: -1 для .box1 и z-index: -11 для .box2: парить

использовать также position:relative для обеих коробок, как вам нужно положение с г-индекс свойства.

так:

.box1{ 
width:200px; 
min-height:200px; 
background:black; 
float:left; 
margin:20px 0 0 0; 
width: 200px; 
z-index: -1; 
position: relative; 
} 

.box2:hover{ 
background: white; 
box-shadow: 0px 0px 5px 5px #888888; 
height:200px; 
margin:20px 0 0 0; 
z-index: -11; 
position: relative; 
} 

Fiddle: http://jsfiddle.net/A5Jc7/63/

Идея заключается в том, чтобы подтолкнуть тень Box2 во время висения ниже box1.