O posicionamento CSS é máis que só coordenadas X, Y
O posicionamento CSS foi unha parte importante na creación de esquemas de sitios web. Mesmo co auxe das novas técnicas de deseño de CSS como Flexbox e CSS Grid, o posicionamento aínda ten un lugar importante na bolsa de trucos de calquera diseñador web.
Ao usar o posicionamento CSS, o primeiro que terás que facer é establecer a propiedade CSS para que poida indicarlle ao navegador se usar o posicionamento absoluto ou relativo dun determinado elemento. Tamén cómpre entender claramente a diferenza entre estas dúas propiedades de posicionamento.
Aínda que son absolutos e relativos as dúas propiedades de posición de CSS que se usan máis frecuentemente no deseño web, hai realmente catro estados para a propiedade da posición:
- estática
- absoluta
- achegada
- fixo
Static é a posición predeterminada para calquera elemento dunha páxina web. Se non define a posición dun elemento, será estático. Isto significa que se mostrará na pantalla en función do lugar onde se atopa o documento HTML e como se mostraría dentro do fluxo normal dese documento.
Se aplica as regras de posicionamento como arriba ou esquerda a un elemento que ten unha posición estática, esas regras serán ignoradas e o elemento permanecerá onde apareza no fluxo de documentos normal. En realidade, rara vez, se algunha vez, necesitará establecer un elemento para unha posición estática en CSS xa que ese é o valor predeterminado.
Posicionamento absoluto de CSS
O posicionamento absoluto é probablemente a posición CSS máis fácil de entender. Comece con esta propiedade da posición CSS:
posición: absoluta;Este valor dille ao navegador que o que se vai situar debería eliminarse do fluxo normal do documento e colocalo nun lugar exacto da páxina. Isto calcúlase en base ao ancestro máis próximo non estás situado.
Debido a que un elemento absolutamente posicionado é eliminado do fluxo normal do documento, non afectará a forma na que os elementos antes ou despois do HTML estean situados na páxina web.
Como exemplo, se tiña unha división que se posicionaba usando un valor de parente (veremos este valor en breve), e dentro desta división tiñas un parágrafo que quería situar 50 píxeles desde a parte superior da división, ti engadiría un valor de posición de "absoluto" a ese parágrafo xunto cun valor de compensación de 50px na propiedade "superior", como este.
posición: absoluta; arriba: 50 píxeles;Este elemento absolutamente posicionado sempre mostrará 50 píxeles desde a parte superior desta división relativamente posicionada, non importa o que máis se amose alí no fluxo normal. O seu elemento "absolutamente posicionado" usou o posicionado relativamente como o seu contexto e o valor positivo que usa é relativo a ese.
As catro propiedades de posicionamento dispoñibles para o seu uso son:
- arriba
- ben
- fondo
- esquerda
Pode empregar arriba ou abaixo (xa que un elemento non se pode situar segundo estes dous valores) e á dereita ou á esquerda.
Se un elemento está configurado nunha posición de absoluto, pero non ten ancestros posicionados non estáticamente, colócase en función do elemento do corpo, que é o elemento máis alto da páxina.
Posicionamento relativo
Xa mencionamos o posicionamento relativo, entón vexamos esa propiedade agora.
O posicionamento relativo usa as mesmas catro propiedades de posicionamento como o posicionamento absoluto, pero no canto de basear a posición do elemento sobre o ancestro máis próximo non posicionado estáticamente, comeza dende onde o elemento sería se aínda estivese no fluxo normal.
Por exemplo, se tes tres parágrafos na túa páxina web e terceiro ten un estilo "posición: relativo" colocado nel, a súa posición estará compensada segundo a súa localización actual.
Párrafo 1.
Párrafo 2.
Párrafo 3.
No exemplo anterior, o terceiro parágrafo situarase a 2em desde o lado esquerdo do elemento contenedor, pero aínda estará por baixo dos dous primeiros parágrafos. Quedaría no fluxo normal do documento e só se compensaría lixeiramente. Se mudou a posición: absoluta; calquera cousa despois de que se amosará encima, porque xa non estaría no fluxo normal do documento.
Elementos nunha páxina web adoitan empregarse para establecer un valor de posición: relativo sen establecer o valor de compensación establecido, o que significa que o elemento permanece exactamente onde aparecería no fluxo normal. Isto faise exclusivamente para establecer ese elemento como un contexto contra o que se poden situar absolutamente outros elementos. Por exemplo, se ten unha división en torno a todo o seu sitio web cun valor de clase de "contedor" (que é un escenario moi común no deseño web), esa división pode configurarse nunha posición de parente para que calquera cousa dentro del poida usar o como contexto de posicionamento.
Que hai sobre o posicionamento fixo?
O posicionamento fixo é moi parecido ao posicionamento absoluto. A posición do elemento calcúlase do mesmo xeito que o modelo absoluto, pero os elementos fixos fixéronse fixos nesa situación, case como unha marca de auga . Todo o resto da páxina desprázase despois dese elemento.
Para usar este valor da propiedade, configurase:
posición: fixa;Teña en conta que, cando resolve un elemento no seu sitio, imprimirase naquela localización cando a súa páxina web estea impreso. Por exemplo, se o elemento está fixado na parte superior da páxina, aparecerá na parte superior de cada páxina impresa, porque está fixada na parte superior da páxina. Pode usar tipos de medios para cambiar como as páxinas impresas exhiben elementos fixos:
Pantalla @media {h1 # first {position: fixed; }} @media print {h1 # first {position: static; }}Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard o 07/01/16.