Предотвращение относительно позиционированного div от выталкивания содержимого

Как я могу предотвратить относительно позиционированный div от последующего нажатия вниз содержимого? В следующем примере я пытаюсь отобразить маленький зеленый div поверх более крупного красного цвета, но следующий красный div будет нажат вниз, когда появится зеленый div.Предотвращение относительно позиционированного div от выталкивания содержимого

Если есть лучший способ сделать это, я буду благодарен за советы.

Вот бегущий пример: http://jsfiddle.net/38Rqh/

<html> 
<head> 
<style type="text/css" media="screen"> 

.top { 
    display: none; 
    background-color: green; 
    width: 100px; 
    position: relative; 
    top: -50px; 
} 

.bottom { 
    width: 200px; 
    height: 200px; 
    background-color: red; 
    border: 1px solid black; 
} 

.bottom:hover + div { 
    display: block; 
} 

</style> 
</head> 
<body> 

<div class="bottom"> 

</div> 
<div class="top">Displaying data</div> 

<div class="bottom"> 

</div> 
<div class="top">Displaying data</div> 

<div class="bottom"> 

</div> 
<div class="top">Displaying data</div> 

</body> 
</html>

источник

2012-11-08 user1810414

relative по-прежнему занимает место. Вам нужно absolute. Одна из возможностей - установить .bottom элементов на position: relative, а затем поместить в них .top элементов и разместить их абсолютно.

http://jsfiddle.net/38Rqh/1/

.top { 
    display: none; 
    background-color: green; 
    width: 100px; 
    position: absolute; 
    top: 150px; 
} 

.bottom { 
    width: 200px; 
    height: 200px; 
    background-color: red; 
    border: 1px solid black; 
    position: relative; 
} 

.bottom:hover .top { 
    display: block; 
}

<div class="bottom"> 
<div class="top">Displaying data</div> 
</div> 

<div class="bottom"> 
<div class="top">Displaying data</div> 
</div>

Таким образом, эти элементы .top будут расположены по отношению к их содержащие .bottom.

Это имеет дополнительное преимущество, не скрывая .top при наведении указателя мыши на .top, что вызывает мерцание, которое вы видите в своем примере.

источник

2012-11-08 20:25:49

Большое спасибо, это работает чудесно. – user1810414

я, возможно, смешивают это с тем, что должно появляться где, но с использованием оболочки дивы и позиции абсолютного вместо относительного избавится от дополнительного пространства.

<html> 
<head> 
<style type="text/css" media="screen"> 

.top { 
    display: none; 
    background-color: green; 
    width: 100px; 
    position: absolute; 
    bottom: 50px; 
} 

.bottom { 
    width: 200px; 
    height: 200px; 
    background-color: red; 
    border: 1px solid black; 
} 

.bottom:hover + .top { 
    display: block; 
} 

.wrapper { position: relative; } 

</style> 
</head> 
<body> 

<div class="wrapper"> 
    <div class="bottom"> 

    </div> 
    <div class="top">Displaying data</div> 
</div> 
<div class="wrapper"> 
    <div class="bottom"> 

    </div> 
    <div class="top">Displaying data</div> 
</div> 
<div class="wrapper"> 
    <div class="bottom"> 

    </div> 
    <div class="top">Displaying data</div> 
</div> 
</body> 
</html>

источник

2012-11-08 20:21:24 gotohales

Хорошо поймай Джеймса, я бы порекомендовал его код. – gotohales

Спасибо. Я ценю это. – user1810414

Предотвращение относительно позиционированного div от выталкивания содержимого

ответ

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