Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] no me funciona z-index

Estas en el tema de no me funciona z-index en el foro de CSS en Foros del Web. Pues eso, no comprendo porque no funciona el z-index tengo este codigo html @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < body >     <svg ...
  #1 (permalink)  
Antiguo 16/06/2016, 12:37
 
Fecha de Ingreso: diciembre-2015
Mensajes: 62
Antigüedad: 6 años
Puntos: 0
no me funciona z-index

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

tengo este codigo html

Código HTML:
Ver original
  1.  
  2.  
  3. <svg  viewBox="0 0 1000 800">
  4.  
  5.  
  6.     <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"/>
  7.    
  8.    
  9.    
  10.     <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"/>
  11.  
  12.    
  13.     <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"/>
  14.    
  15.  
  16. </svg>
  17.  
  18.  
  19. </body>

y esta hoja de estilos

Código CSS:
Ver original
  1. .verde {z-index:-1;}
  2. .rojo {z-index:2;}
  3. .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?
  #2 (permalink)  
Antiguo 17/06/2016, 08:35
 
Fecha de Ingreso: julio-2014
Mensajes: 179
Antigüedad: 7 años, 4 meses
Puntos: 26
Respuesta: no me funciona z-index

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!
__________________
Si haces las cosas como nadie las ha hecho, cobralas bien, si las vas a hacer como todos las han hecho, cobralas bien!!
MecanizandoWeb.com
  #3 (permalink)  
Antiguo 18/06/2016, 13:34
 
Fecha de Ingreso: diciembre-2014
Ubicación: Madrid
Mensajes: 274
Antigüedad: 7 años
Puntos: 5
Respuesta: no me funciona z-index

Recuerda que para utilizar z-index el atributo position debe ser absolute.
__________________
Experto: aunque no sepas hacer algo, los novatos te pedimos que nos digas algo aunque sepas que no acertarás
  #4 (permalink)  
Antiguo 21/06/2016, 12:53
 
Fecha de Ingreso: diciembre-2015
Mensajes: 62
Antigüedad: 6 años
Puntos: 0
Respuesta: no me funciona z-index

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??????
  #5 (permalink)  
Antiguo 21/06/2016, 16:48
 
Fecha de Ingreso: julio-2014
Mensajes: 179
Antigüedad: 7 años, 4 meses
Puntos: 26
Respuesta: no me funciona z-index

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!
__________________
Si haces las cosas como nadie las ha hecho, cobralas bien, si las vas a hacer como todos las han hecho, cobralas bien!!
MecanizandoWeb.com
  #6 (permalink)  
Antiguo 23/06/2016, 11:49
 
Fecha de Ingreso: diciembre-2015
Mensajes: 62
Antigüedad: 6 años
Puntos: 0
Respuesta: no me funciona z-index

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.
  #7 (permalink)  
Antiguo 27/06/2016, 06:42
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 19 años, 4 meses
Puntos: 2113
Respuesta: no me funciona z-index

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.
__________________
(:
  #8 (permalink)  
Antiguo 27/06/2016, 07:03
 
Fecha de Ingreso: diciembre-2015
Mensajes: 62
Antigüedad: 6 años
Puntos: 0
Respuesta: no me funciona z-index

pzin haber mira he puesto esto en el css
Código CSS:
Ver original
  1. .verde {
  2. position:absolute;
  3. z-index:-3;
  4. }

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?.
  #9 (permalink)  
Antiguo 29/06/2016, 19:12
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 19 años, 4 meses
Puntos: 2113
Respuesta: no me funciona z-index

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.
__________________
(:
  #10 (permalink)  
Antiguo 01/07/2016, 17:39
 
Fecha de Ingreso: diciembre-2015
Mensajes: 62
Antigüedad: 6 años
Puntos: 0
Respuesta: no me funciona z-index

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 :)

Etiquetas: html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:58.