[SOLUCIONADO] no me funciona z-index

lobopk2 · #1 (**permalink**) 16/06/2016, 12:37

Pues eso, no comprendo porque no funciona el z-index

tengo este codigo html

Código HTML:

Ver original<body>
 
 
<svg  viewBox="0 0 1000 800">
 
 
    <rect class="rojo" style="fill-rule:evenodd;stroke:#f00;stroke-width:.5;fill:#f00" height="70.53" width="355.5" y="58.71" x="28.79"/>
    
    
    
    <rect class="azul" style="fill-rule:evenodd;stroke:#f00;stroke-width:.5;fill:#00f" height="70.53" width="355.5" y="58.71" x="562.8"/>
 
    
    <rect class="verde" style="fill-rule:evenodd;stroke:#f00;stroke-width:.5;fill:#0f0" height="70.53" width="355.5" y="58.71" x="316.7"/>
    
 
</svg>
 
 
</body>

y esta hoja de estilos

Código CSS:

Ver original.verde {z-index:-1;}
.rojo {z-index:2;}
.azul {z-index:3;}

ahora se ve el verde encima de todos, cuando lo queria debajo de todos, segun la intruccion css, deveria dejarlo debajo de los otros, pero no funciona, esto porque es?

DesgraciadoGabo · #2 (**permalink**) 17/06/2016, 08:35

Es que en este caso se ordenan según en código, en tu código está primero el rojo, luego azul y al ultimo verde, en ese orden se muestran, te dejo el ejemplo:
https://jsfiddle.net/z8fmu3sz/

Saludos!

diegoguerrero · #3 (**permalink**) 18/06/2016, 13:34

Recuerda que para utilizar z-index el atributo position debe ser absolute.

lobopk2 · #4 (**permalink**) 21/06/2016, 12:53

gracias por vuestras respuestas, no me llego ninguna notificacion por correo y pense que no me habian escrito jijijijiijijij.

DesgraciadoGabo, es curioso, pense que funcionaba el reves, es decir el verde al estar el ultimo en el codigo, se veria al fondo, pero no es asi.

no obstante, el codigo css, no deveria mandarlos donde yo les diga, estando el codigo como este?

Quizas deveria haber puesto important! para que me funcionara, estando el codigo como este o tampoco funcionaria?

lo digo, porque entonces que sentido tiene en css el z-index si manda el codigo html??????

DesgraciadoGabo · #5 (**permalink**) 21/06/2016, 16:48

Mira esta info te puede servir:

SVG 2.0 https://www.w3.org/TR/SVG2/render.html#RenderingOrder
SVG 1.1 https://www.w3.org/TR/SVG/render.html#RenderingOrder

Saludos!

lobopk2 · #6 (**permalink**) 23/06/2016, 11:49

DesgraciadoGabo

por lo que veo el z-index si que funciona, la diferencia que veo es que ahi lo ponen en linea, yo lo tengo en un archivo independiente de css.

Quizas alla que hacerlo en linea, ya que dice que por defecto todos estan en el nivel 0, y digo yo que si eso es mas prioritario que un archivo externo, quizas por eso no me funciona y tendria que ponerlo dentro del codigo, no? como en el ejemplo que vi en tu enlaze.

pzin · #7 (**permalink**) 27/06/2016, 06:42

Para que z-index funcione tienes que especificar cualquier posición no estática al elemento. Te vale absoluta, fija o relativa.

Lo que no hace z-index es colocar los elementos antes o después, sino delante o detrás; el cómo se apilan los elementos.

lobopk2 · #8 (**permalink**) 27/06/2016, 07:03

pzin haber mira he puesto esto en el css

Código CSS:

Ver original.verde {
position:absolute;
z-index:-3;
}

sigue estando delante.

me parece que en svg, va a tener que ser situarlo en el codigo html en la posicion correcta para que funcione.

te parece correcto esto?.

pzin · #9 (**permalink**) 29/06/2016, 19:12

Dentro de un elemento SVG no funciona. No me había fijado que era para un elemento de un SVG,

Ahí tendrás que colocarlo tal cual necesites o hacer una pirulilla usando xlink:href.

lobopk2 · #10 (**permalink**) 01/07/2016, 17:39

pzin, vale por fin, entonces era eso, que en un svg, tiene que ser por codigo el posicionamiento y no vale de nada el css.

Bueno pues gracias, ya se una cosa mas :)