CSS Floating with Overlap

Sto provando a impostare una semplice struttura di tabulazioni orizzontali per una pagina su cui sto lavorando, e sto riscontrando dei problemi con il div flottante combinato con z-index.CSS Floating with Overlap

Visualizzazione del codice seguente in un browser:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
    <style type="text/css"> 
     #main { width: 500px; z-index: 1;} 

     .left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 2; margin-right: -2px } 
     .right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 3; } 

     .clear { clear: both; } 
</style> 
</head> 

<body> 
    <div id="main"> 
     <div class="left"> 
      LEFT 
     </div> 
     <div class="right"> 
      RIGHT 
      <br /> 
      RIGHT 
     </div> 
     <div class="clear"></div> 
    </div> 
</body> 
</html>

perché non bordo arancione del div sinistra si sovrappongono bordo verde del div giusto?

fonte

2009-02-23 Michael

La proprietà z-index non si applica agli elementi posizionati staticamente. Per utilizzare z-index, il CSS deve includere anche qualsiasi valore di posizione diverso da statico (cioè relativo, assoluto, fisso).

.left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 3; margin-right: -2px; position: relative; } 
.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 2; position: relative; }

Vi darò quello che volete, penso. Ho aggiunto la posizione: relativa; e ha cambiato l'indice z di .left in 3 (da 2) e ha cambiato l'indice z di .right in 2 (da 3).

fonte

2009-02-23 23:01:43

z-index non ha alcun effetto su elementi che non sono posizionati (es position:absolute;)

fonte

2009-02-23 23:02:24

o 'posizione: relativo;' –

Negative margin-left?

.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 3; margin-left: -5px;}

fonte

2009-02-23 23:04:46 BenB

Utilizzare la proprietà position per l'elemento superiore. Aggiunta di position:relative a .left.

fonte

2015-03-26 03:21:59 Gelio

CSS Floating with Overlap

risposta

Problemi correlati