Posicionamento en CSS
O posicionamento en CSS permite en resume, máximo control sobre o
lugar que cada elemento dunha páxina Web ocupará dentro da propia
páxina, as súas condicións de visibilidade e “flotabilidade” así como o manexo
de capas.
Position
A propiedade position admite os valores:
- static – Valor por defecto – Os elementos con posición estática
debúxanse uns a continuación dos outros.
- absolute – Os elementos posicionarse dentro dun documento
HTML de forma absoluta independentemente da que ocupan o resto de
elementos do documento. Incluso pódense superpoñer a outros elementos. A
posición ven determinada por top e left, que
son as coordenadas da esquina superior esquerda da caixa que contén o
elemento, medidas desde o elemento contenedor do elemento que estamos a
posicionar se este está posicionado dunha forma absoluta ou relativa. Se foi
posicionado estáticamente non o toma en consideración.
- relative – Os elementos posicionanse relativamente, a diferenza
dos anteriores forman parte do fluír do documento. A orixe das
coordenadas é a posición natural que terían de non estar posicionados.
- fixed – Os elementos posicionanse dunha forma fixa, é unha
subcategoría do posicionamento absoluto. A caixa fixase con respecto a algunha
referencia visual (pantalla, páxina impresa ...). Na pantalla os elementos
establecidos como fixed non se moven cando o documento é
desprazado. Para os medios paxinados, os bloques con posicións fixas son
repetidos en cada páxina, resultando moi útil para poñer os encabezados e pes
de páxina.
Exemplo de regras de estilo:
|
.posStatic {
position:static;
background-color:#E6E6FA;
}
.posAbsolute90_60{
position:absolute;
top:90px;
left:60px;
background-color:#CAB0FB;
}
.posRelative
{
position:relative;
background-color:yellow;
color:black;
}
.posRelative90_60
{
position:relative;
top:90px;
left:60px;
background-color:blue;
color:white;
}
.posFixed1_600
{
position:fixed;
top:1px;
left:600px;
background-color:magenta;
} |
Exemplo de código:
|
<div class="posEstatic">Pos 1 - posStatic - Posicionamento
estático que ten dentro un posicionamento Absoluto
<!--
Posicionamento
Absoluto (90,60) que o
non estar contido en ningun pai con posicionamento
absoluto ou relativo midese dende a
esquina superior esquerda da
páxina
-->
<div
class="posAbsolute90_60">Pos 2 -
posAbsolute90_60</div>
</div>
<!--Posicionamento
relativo (90,60) contado dende o punto
no que se debuxaría se fose
estático
-dende o último elelmento HTML estático ou relativo- no noso caso
a liña sequinte a Pos1
-->
<div class="posRelative90_60">Pos 3 -
posRelativ90_60
<!-- Posicionamento
Absoluto (90,60) que o estar contido
nun div con posicionamento relativo
midese dende a súa esquina superior esquerda (Pos
3)-->
<div
class="posAbsolute90_60">Pos 4 -
posAbsolute90_60</div>
<!-- Posición dende o último
elemento estático ou relativo ( Pos 3
)-->
<div
class="posRelative">Pos 5 -
posRelative</div>
</div>
<!-- Se agora escribimos
estáticamente ou relativamente sen especificar posición toma o espacio
ocupado polas capas relativas fixadas con posición como se fosen relativas
normais -->
<span class="posStatic">Pos
6</span><br>
<span
class="posRelative">pos7</span>
<!-- Esto no
funcionará en Internet Explorer -->
<div
class="posFixed1_600">Pos 8-
posFixed1_600</div> |
Visualización: (En Internet Explorer non se verán os elementos con position
Fixed correctamente)
Pos 1 - posStatic - Posicionamento estático que
ten dentro un posicionamento Absoluto
Pos 2 - posAbsolute90_60 Pos 3 - posRelative90_60
Pos 4 - posAbsolute90_60
Pos 5 - posRelative
pos7
Pos 8-
posFixed1_600 |
top, left, width, height
O posicionamento absoluto define un rectángulo de fluxo para el e os seus
elementos fillos.
O rectángulo comeza nunha esquina superior esquerda
definida por top e left. Ademais pódese definir o ancho e alto
do elemento ca propiedade width e height respectivamente.Os
valores destas propiedades son unidades de lonxitude. Se
non se define algunha destas propiedades o rectángulo expándese ata o ancho do
navegador ou ata o alto do contido do elemento respectivamente. Este
é o comportamento por defecto.
Exemplo de regras de estilo:
|
.capaConTamano
{
position:relative;
top:20px;
left:60px;
width:90;
height:120;
background-color:blue;
color:white;
} |
Exemplo de código (Para que a visualización sexa correcta debe de especificar
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> )
:
|
<div class="capaConTamano">Posicionamento relativo (20,60)<br
/> Ancho: 90<br /> alto:
120</div> |
Visualización:
|
Posicionamento relativo
(20,60)
Ancho: 90
alto: 120 |
visibility
A propiedade visibility dun elemento controla como será visualizado.
Os valores posibles son:
- visible - O elemento será visualizado
- hidden - O elemento non será visualizado. Aínda cun
elemento non sexa visible continúa ocupando un espazo no fluír do documento.
Estes valores pódense cambiar en tempo de execución mediante
JavaScript.
Exemplo de regras de estilo:
|
#capa1{
position:absolute;
top:20px;
left:10px;
background-color:#CAB0FB;
visibility:hidden;
}
#capa2
{
position:absolute;
top:20px;
left:170px;
background-color:#E6E6FA;
visibility:visible;
} |
Exemplo de código:
|
<div id="capa1">Esta capa non se visualizará porque está
oculta</div>
<div id="capa2">Esta capa si se
visualizará</div> |
Visualización:
Esta capa non se visualizará porque está oculta
Esta capa si se
visualizará |
z-index
Pódese producir unha superposición de elementos a hora
de visualizalos se decidimos posicionalos na mesma zona. O navegador visualiza
na parte coincidente só o elemento situado na capa superior. Por defecto
os elementos apilanse en capas na orde en que se definen, polo tanto o elemento
situado máis tarde é o que ocupará a capa que se verá en primeiro lugar. A
propiedade z-index permite especificar a orde de apilamento dos
elementos especificando un valor positivo. Á primeira capa a visualizar será a
que teña un z-index maior, polo tanto para darlle prioridade de
visualización a un elemento temos que darlle un z-index alto.
Exemplo de regras de estilo:
|
#capa2
{
position:absolute;
top:20px;
left:70px;
background-color:#E6E6FA;
z-index:2;
}
#capa3
{
position:absolute;
top:20px;
left:50px;
background-color:#FFB0BC;;
z-index:1;
} |
Exemplo de código:
|
<div id="capa2">Esta capa superponse a capa3 posto que ten un
z-index maior</div>
<div id="capa3">Esta capa, aínda que se
debuxou despois, colocase por debaixo de capa2 porque ten un z-index menor
</div> |
Visualización:
Esta capa superponse a capa3 posto que ten un z-index
maior
Esta capa, aínda que se debuxou despois, colocase por
debaixo de capa2 porque ten un z-index menor
|
float, clear
A propiedade float permite sacar un elemento do fluxo. Un bloque
“flotante" debe ter definida unha anchura implícita ou expresamente, xa que do
contrario non será tratado como flotante.
Admite os valores
- right – Posicionamento do elemento a dereita doutros.
- left – Posiciionamento do elemento a esquerda doutros
- none – Ningún posicionamento
Clear pódese utilizar conxuntamente con float para indicar cando un elemento
flotante admite outros elementos flotantes xunto a el.
Os posibles valores
son:
- none – O elemento permite outros flotantes a ambos lados
- left – O elemento non permite flotantes a súa izquierda
- right – O elemento non permite flotantes a súa dereita
- both – O elemento non permite flotantes a ningún lado.
Exemplo de regras de estilo:
|
+++++++++++++++++++++++++++ |
Exemplo de código:
|
+++++++++++++++++++++++++++++++++++++++++++++ |
Visualización:
|
+++++++++++++++++++++++++++++++++ |