Cómo "z-index" para hacer que un menú esté siempre en la parte superior del contenido

Tengo un problema y no sé cómo corregirlo. Lo que quiero es que el "recuadro rojo" permanezca en la parte superior de la página en un z-index 2, mientras que todo el contenido del fondo permanece en el índice 1, pero de alguna manera este código está "contrayendo" las capas. Si alguien puede ayudarme, realmente lo aprecio. Lo siento por mi ingles. Gracias por adelantado.Cómo "z-index" para hacer que un menú esté siempre en la parte superior del contenido

<html> 
<head> 
<title></title> 
<style type="text/css"> 

body { margin: 0; } 

#container { 
    position: absolute; 
    float: right; 
    z-index: 1; 

} 

.left1 { 
    background-color: blue; 
    height: 50px; 
    width: 100%; 

} 
.left2 { 
    background-color: green; 
    height: 50px; 
    width: 100%; 

} 


#right { 
    background-color: red; 
    height: 300px; 
    width: 300px; 
    float:right; 
    z-index: 999999; 
    margin-top: 0px; 
    position: relative; 
} 




</style> 
</head> 

<body> 

<div id="container"></div> 
<div class="left1">LEFT BLUE</div> 
<div class="left2">LEFT GREEN</div> 
</div> 
<div id="right">RIGHT RED</div> 

</body> 
</html>

Fuente

2012-05-08 rmz

Creo que necesitarás compartir algunos html para ayudarnos a ayudarte ... es probable que no necesites z-index para hacerlo. puedes usar el posicionamiento relativo y absoluto ... y mirando a tu ejemplo css, me temo que quizás no entiendas cómo usar correctamente el posicionamiento relativo y absoluto. No es que yo sepa mucho sobre eso;) – rafaelbiten

¡Funcionó! Perfecto. Lo he intentado antes pero no lo cambié a "absoluto". ¡Muchas gracias! – rmz

etiqueta de extremo extra de div en tu html – adedoy

Lo más probable es que no necesite z-index para hacer eso. Puede usar posicionamiento relativo y absoluto.

Te aconsejo que estudies mejor el posicionamiento css y la diferencia entre el posicionamiento relativo y el absoluto ... Vi que estás poniendo posición: absoluta; a un elemento e intentando flotar ese elemento. No funcionará amigo! Cuando comprenda el posicionamiento en CSS, ¡su trabajo será mucho más fácil! ;)

Fuente

2012-05-08 22:10:31 rafaelbiten

Sí, estás absolutamente en lo cierto. Gracias por el consejo. Todavía estoy jugando mucho con el posicionamiento ... ¡gracias de nuevo! – rmz

¡Avíseme si necesita ayuda! Solo recuerde que los elementos posicionados "absolutos" siempre serán "relativos" a su elemento padre que se estableció en "posición: relativa;". Si entiendes eso, te ayudará con elementos de posición absoluta. ¡Buena suerte con tu proyecto! – rafaelbiten

Muchas gracias :) – rmz

#right { 
    background-color: red; 
    height: 300px; 
    width: 300px; 
    z-index: 9999; 
    margin-top: 0px; 
    position: absolute; 
    top:0; 
    right:0; 
}

position: absolute; arriba: 0; Derecha: 0; haz el trabajo aquí! :) ¡También elimine el flotante!

Fuente

2012-05-08 22:07:43 creativeby

Ok, supongo que quieres poner el archivo .left dentro del contenedor, así que te sugiero que edites tu html. La clave es la position:absolute y right:0

#right { 
    background-color: red; 
    height: 300px; 
    width: 300px; 
    z-index: 999999; 
    margin-top: 0px; 
    position: absolute; 
    right:0; 
}

aquí es el código completo: http://jsfiddle.net/T9FJL/

Fuente

2012-05-08 22:19:16 adedoy

usted podría poner el estilo en el contenedor de menú div con:

<div style="position:relative; z-index:10"> 
    ... 
    <!--html menu--> 
    ... 
</div>

antes enter image description here

después de

enter image description here

Fuente

2015-05-21 07:43:09

no funciona conmigo. – huykon225

Cómo "z-index" para hacer que un menú esté siempre en la parte superior del contenido

Respuesta

Cuestiones relacionadas