css - what - script javascript html

Colocación de botones y enlaces sobre el script particular.js(índice Z)

Question

Estoy tratando de usar el script modules.js, por lo que las partículas flotarán en toda la página (con fondo transparente). Necesito arrastrar algunos de los enlaces y botones sobre las partículas, para que puedan hacer clic.

Con respecto al link , ¿puedo poner el elemento "C" grande sobre el elemento "B" grande mientras tengo el elemento "b" sobre el elemento "C" grande?

Lo que estaba pensando era que relativo significa el índice z en relación a su padre, mientras que si configurara todos los elementos en absoluto, sería posible mostrar la pequeña "b" sobre la "C" grande, pero no lo es. ¿Alguien me lo puede explicar?

<div id="A">A<div id="a">a</div></div>
<div id="B">B<div id="b">b</div></div>
<div id="C">C<div id="c">c</div></div>

Answer 1

La posición no se refiere al índice z. Se refiere a la posición x, y en la pantalla. Lea acerca de la propiedad de la posición css here .

El índice z es simplemente la posición absoluta en el eje z. Por lo tanto un índice más alto se apila sobre un menor.

Sin embargo, la posición tiene un efecto en el eje z para divs fuera de su div, ya que diferentes valores implican diferentes órdenes de renderización. Puede ver este efecto si abre las herramientas de desarrollo de Chrome en la página que proporcionó y cambia A de estático a relativo.

Aunque A tiene un índice de 37, estará por encima de B porque se procesa después de A. Para que el índice z funcione de manera confiable, debe apilarlos entre sí.

Si abres tu ejemplo de partícula de codepen y abres las herramientas de desarrollo de Chrome, puedes ver cómo el cuadro FPS se comporta de forma extraña si haces clic en los detalles. Esto es porque esta fuera de la particula.js div.

En resumen, si desea ver lo que está sucediendo, use algo como las herramientas de desarrollador en Chrome. Firefox, Opera e IE tienen herramientas similares.

Aquí hay un ejemplo de trabajo en codepen . Agrega la clase a tu css y coloca el div en la página:

.test { 
  index: 50;
  top: 100px;
  position: absolute;
}

Answer 2

Lo que sugeriría es que proporcione un índice z de alto valor para su a (por ejemplo z-index:9999; ), pero asegúrese de que los elementos primarios de a no tengan valores de índice z más pequeños porque el índice z de un elemento estar limitado por el valor establecido por su padre.

Entonces, para su pregunta " ¿puedo poner el elemento" C "grande sobre el elemento" B "grande mientras tengo el elemento" b "pequeño sobre el elemento" C "grande?, La respuesta es no porque el índice z de su pequeño El elemento "b" estaría limitado por su elemento principal, que es el elemento "B" grande y el elemento "B" grande está debajo del elemento "C".

Aquí hay una muestra de trabajo con un .container muestra debajo de las partículas mientras que el enlace también funciona. Lo que importa es que debes tener esto:

a{
    position:relative;
    z-index:9999;
}

Y asegúrese de que el padre (en este caso, el .container ) debe tener un valor de índice z de 9999 o mayor (o cualquier valor mayor que el índice z del patrón), de lo contrario limitará el índice z de a y si es más bajo que el índice z del patrón, los botones no podrán pulsarse.

Si tiene botones con fondos sólidos, recomendaría configurar el estilo en un pseudo-elemento para a índice z más bajo para permitir que aparezcan patrones, mientras se mantiene la capacidad de hacer clic en el enlace.