Impedire che il div di posizione relativa non spinga verso il basso il contenuto

Come posso evitare che il div di posizione relativa non spinga verso il basso il contenuto che segue? Nell'esempio seguente sto provando a visualizzare un piccolo div verde sopra un rosso più grande, ma il div seguente rosso viene premuto verso il basso quando appare il div verde.Impedire che il div di posizione relativa non spinga verso il basso il contenuto

Se c'è un modo migliore per farlo, gradirei consigli.

Ecco un esempio di esecuzione: 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>

fonte

2012-11-08 user1810414

relative prende ancora spazio. Quello che ti serve è absolute. Una possibilità è quella di impostare gli elementi .bottom su position: relative e quindi posizionare gli elementi .top al loro interno e posizionarli assolutamente.

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>

In questo modo, gli elementi .top saranno posizionati in relazione al loro contenente .bottom.

Questo ha l'ulteriore vantaggio di non nascondere lo .top quando si passa sopra allo .top stesso, provocando lo sfarfallio che si vede nell'esempio.

fonte

2012-11-08 20:25:49

Grazie mille, funziona meravigliosamente. – user1810414

forse ho mescolato questo con quello che dovrebbe essere apparendo dove, ma utilizzando div involucro e posizione assoluta, invece di relativa sbarazzarsi dello spazio extra.

<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>

fonte

2012-11-08 20:21:24 gotohales

Buona cattura James, consiglierei il suo codice. – gotohales

Grazie. Lo apprezzo. – user1810414

Impedire che il div di posizione relativa non spinga verso il basso il contenuto

risposta

Problemi correlati