Colocación de elementos superpuestos con follas de estilo en cascada
Un dos retos ao usar o posicionamento CSS para o deseño da páxina web é que algúns dos seus elementos poden superponerse a outros. Isto funciona moi ben se queres que o último elemento do HTML estea encima, pero que se non o fai e se desexas ter elementos que actualmente non se sobrepoñen aos demais porque o proxecto chama esta mirada "en capas" ¿? Para cambiar a forma en que se solapan os elementos necesitas usar a propiedade de CSS.
Se usaches unhas ferramentas gráficas en Word e PowerPoint ou un editor de imaxes máis robusto como o Adobe Photoshop, entón é probable que vexas algo así como o índice z en acción. Nestes programas, pode resaltar o (s) obxecto (s) que debuxou e elixir unha opción para "Enviar a atrás" ou "Por diante" certos elementos do documento. No Photoshop, non tes estas funcións, pero tes o panel "Capa" do programa e podes organizar un elemento caendo no lienzo reorganizando estas capas. En ambos exemplos, vostede está esencialmente configurando o índice z destes obxectos.
¿Que é o índice z?
Cando estás usando o posicionamento CSS para colocar os elementos na páxina, tes que pensar en tres dimensións. Existen dúas dimensións estándar: esquerda / dereita e superior / inferior. O índice de esquerda a dereita coñécese como o índice x, mentres que o superior a o inferior é o índice y. Así é como situarías os elementos horizontal ou verticalmente, usando estes dous índices.
Cando se trata de deseño web, tamén hai a orde de apilamento da páxina. Cada elemento da páxina pode estar en capas por encima ou por baixo de calquera outro elemento. A propiedade do índice z determina onde está a pila cada elemento. Se o índice x eo índice y son as liñas horizontais e verticais, entón o índice z é a profundidade da páxina, esencialmente a 3ª dimensión.
Gústame pensar nos elementos nunha páxina web como anacos de papel e na propia páxina web como un collage. Onde coloque o papel está determinado polo posicionamento, e canto queda cuberto polos outros elementos é o índice z.
O índice z é un número, positivo (por exemplo, 100) ou negativo (por exemplo -100). O índice z predeterminado é 0. O elemento co índice z maior é na parte superior, seguido polo seguinte máis alto e de aí o menor co índice z menor. Se dous elementos teñen o mesmo valor de índice z (ou non está definido, o que significa que usa o valor predeterminado de 0), o navegador encadrábano no orde que aparecen no HTML.
Como usar o índice z
Dea a cada elemento que queiras na túa pila un valor de índice z diferente. Por exemplo, se teño cinco elementos diferentes:
- elemento 1 - índice z de -25
- elemento 2 - índice z de 82
- elemento 3 - z-index non establecido
- elemento 4 - índice z de 10
- elemento 5 - índice z de -3
Apilaranse no seguinte orde:
- elemento 2
- elemento 4
- elemento 3
- elemento 5
- elemento 1
Recoméndovos usar valores de índices z enormemente diferentes para apilar os seus elementos. Deste xeito, se agrega máis elementos á páxina máis tarde, ten espazo para cubelos sen ter que axustar os valores do índice z de todos os outros elementos. Por exemplo:
- 100 para o meu elemento top-most
- 0 para o meu elemento central
- -100 para o meu elemento inferior
Tamén pode dar dous elementos ao mesmo valor de índice z. Se estes elementos están apilados, mostraranse na orde que escriben no HTML, co último elemento situado arriba.
Unha nota, para un elemento para usar con eficacia a propiedade do índice z, debe ser un elemento de nivel de bloque ou usar unha visualización de "bloque" ou "bloque en liña" no seu ficheiro CSS.
Artigo orixinal de Jennifer Krynin. Editado o 12/09/16 por Jeremy Girard.