Div en la parte superior de la Div utilizando z-index

tengo los siguientes divs en mi HTML:Div en la parte superior de la Div utilizando z-index

<div class="main"> 
<div class="bgimage"></div> 
<div class="content">Text</div>

que es directamente dentro de mi cuerpo.

Con el siguiente CSS:

body { 
    margin: 0; 
    padding: 20px 0; 
} 
.content { 
    filter: alpha(opacity=50); 
    -moz-opacity: 0.5; 
    opacity: 0.5; 
} 
.content { 
    position: relative; 
    z-index: 1; 
    border: #000 thin solid; 
    width: 960px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #000; 
} 
.bgimage { 
    position: absolute; 
    z-index: -1; 
    width: 1024px; 
    height: 768px; 
    margin-left: auto; 
    margin-right: auto; 
    background-image: url(bg1.jpg); 
}

Básicamente, tengo un div que con una pantalla una imagen de fondo, y voy a tener otra Div en la parte superior de esta con la transparencia. Este código actual funciona, pero mi problema es cuando intento bajar el contenido div desde arriba.

Cuando agrego margin-top: 100px, por ejemplo, también baja la imagen. Pensé que no tocaría si no está en el mismo índice Z? ¿Por qué agregar un margen también fuerza al bgimage div hacia abajo?

También he intentado hacer del div con clase de contenido una posición absoluta y un zindex, pero luego esto no se centrará. ¿Cómo debería resolver esto?

Fuente

2010-03-27 Iacks

¿Es posible establecer .bgimage en la posición de arriba: 0? y también, ¿por qué no envolver contenido dentro de bgimage? – xandy

Configurándolo en la parte superior: ¡20 lo pone a lo que estoy buscando! Pero pensé que no lo necesitaría ya que tengo un relleno para el cuerpo que pensé que se encargaría de eso. Editaré esto en el CSS. – Iacks

z-index no tiene relación con el posicionamiento: solo afecta el orden de representación de sus elementos. Position: relative le dice al navegador que represente el elemento en el lugar en el que debería estar, y lo compensa con las posibles coordenadas left, right, top o bottom. Por lo tanto, los márgenes, los rellenos, etc. aún lo afectan.

Solo position: absolute garantiza la posición independance.

Fuente

2010-03-27 01:59:53 zneak

"z-index no tiene relación con el posicionamiento: solo afecta el orden de representación de sus elementos" ¡Despejado y al grano! –

El posicionamiento absoluto de CSS siempre se hace "relativo" al ancestro más reciente que tiene una "posición: relativa", de lo contrario utiliza la etiqueta de cuerpo por defecto. Si el CSS que incluyó es todo lo que afecta a esos divs, entonces su div .content se colocará en relación con el div principal, pero su .bgImage se posicionará en función de la etiqueta.

Si desea que tanto .content como .bgImage se muevan en bloque, entonces deberá agregar una "posición: relativa" a div.main.

Fuente

2010-03-27 02:47:50

el CSS debe ser

.bgimage { position: relative; } 

.content { position: absolute; }

por lo que la .Este contenido se coloca en relación con el .bgimage tu CSS actual hace que la posición .bgimage en relación con el documento.

ver este link en el posicionamiento CSS

Fuente

2010-03-27 03:26:08 pixeltocode

no veo ninguna necesidad de "z-index" o es "position: absolute" en su código a todos - a menos que tenga otras complicaciones que no se ha revelado a nosotros .

Para centrar el fondo de la clase DIV = "principal":

body{margin:0;padding:20px 0;} 
.main{background:transparent url(bg1.jpg) no-repeat center top;} 
.content{border:#000 thin solid;width:960px;margin-left:auto;margin-right:auto;background-color:#000;opacity: 0.5;filter:alpha(opacity=50);-moz-opacity: 0.5;}

El "centro superior" coloca el centro de la parte superior de la imagen de fondo en el centro de la parte superior del elemento al que se aplica.Es posible que desee aplicar una

min-width:1024px;_width:1024px;

al mismo elemento - para prevenir una ventana más estrecha de la ocultación de los bordes (esto va a cambiar la forma del elemento se hace si el "puerto de vista" es más estrecha que las dimensiones del fondo).

La única cosa que su código pre-modificado que puede hacer que el código modificado no puede:

recortar la imagen de fondo (si no es nativa de 1024px x 768px) utilizando el css "ancho" y propiedades de "altura"
= Si el elemento "principal" de clase ya tiene un conjunto de imágenes de fondo, la mayoría de los navegadores no soportan el CSS3 necesario para apilar múltiples orígenes en el mismo elemento

Algo de lo que era declaró sobre "z-indexing" y la propiedad de "posición" anterior fue c orrect pero no mencionó: has sacado tu elemento class = "content" del "flujo". Los elementos ancestros no crecerán cuando el contenido del elemento class = "content" crezca. Esta es una diferencia importante y fundamental entre los elementos ed "z-index" y los elementos que permanecen "en el flujo".

Otras notas secundarios:

elementos con el mismo índice z se apilan según su orden en el HTML (más tarde en el HTML significa que son atraídos por encima en la pantalla)
"z- index "ing require" position: (absolute | relative) "," z-index: (valor válido) ", y IIRC" (top | left | bottom | right): (valor válido) "para sacar el elemento" de el flujo "

Fuente

2010-03-27 05:12:18 David

Div en la parte superior de la Div utilizando z-index

Respuesta

Cuestiones relacionadas