CSS flotante con superposición

Estoy tratando de configurar una estructura de tabulación horizontal simple para una página en la que estoy trabajando, y estoy teniendo problemas con los div flotantes combinados con z-index.CSS flotante con superposición

Viendo el código siguiente en un navegador:

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

¿Por qué no el borde naranja de la izquierda div superponen borde verde de la derecha div?

Fuente

2009-02-23 Michael

propiedad del índice Z no se aplicará a los elementos posicionados estáticamente. Para usar el índice Z, CSS también debe incluir cualquier valor de posición que no sea estático (es decir, relativo, absoluto, fijo).

.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; }

Te daré lo que quieras, creo. Agregué la posición: relativa; y cambió el índice Z de .left a 3 (de 2) y cambió el índice z de .right a 2 (de 3).

Fuente

2009-02-23 23:01:43

z-index no tiene ningún efecto sobre los elementos que no están colocadas (por ejemplo position:absolute;)

Fuente

2009-02-23 23:02:24

o 'posición: relative;' –

Negativo margin-left?

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

Fuente

2009-02-23 23:04:46 BenB

Utilice la propiedad position para element upper. Agregar position:relative al .left.

Fuente

2015-03-26 03:21:59 Gelio

Respuesta

Cuestiones relacionadas