Temas > Programacion > Css > Posicionamiento relativo en html con Css
Julio

Posicionamiento relativo en html con Css
La propiedad position determina el punto de referencia donde se debe
localizar cada elemento HTML. Por defecto esta propiedad se inicializa con
el valor static.
Con el valor por defecto static, cada elemento HTML se localiza de
izquierda a derecha y de arriba hacia abajo.
El segundo valor posible para esta propiedad es relative. En caso de fijar
la propiedad position con el valor relative, podemos modificar la posición
por defecto del elemento HTML modificando los valores left y top (con
valores positivos o inclusive negativos).
Veamos un ejemplo con tres div, de los cuales el segundo lo desplazamos 15
pixeles a nivel de columna y 5 pixeles a nivel de fila:
<?php //esto no va
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="caja1">
<p>Esta es la primer caja.</p>
<p>No se desplaza.</p>
</div>
<div id="caja2">
<p>Esta es la segunda caja.</p>
<p>Se desplaza 15 píxeles a la derecha y 5 hacia abajo de su posición
por defecto.</p>
</div>
<div id="caja3">
<p>Esta es la tercer caja.</p>
<p>No se desplaza.</p>
</div>
</body>
</html>
?>//esto no va
La hoja de estilo asociada es:
<?php //esto no va
#caja1,#caja2,#caja3 {
  background-color:#f99;
  font-family:verdana;
  font-size:1.3em;
}
#caja2 {
  position:relative;
  left:15px;
  top:5px;
}
?>//esto no va
Repasemos un poquito, recordemos que cuando un conjunto de elementos tienen
los mismos valores para una serie de propiedades los podemos agrupar
separándolos por coma, esto sucede para los tres Id #caja1,#caja2 y #caja3
que tienen los mismos valores para las propiedades background- color,
font-family y font-size:
<?php //esto no va
#caja1,#caja2,#caja3 {
  background-color:#f99;
  font-family:verdana;
  font-size:1.3em;
}
?>//esto no va
Luego como debemos inicializar la propiedad position sólo para el Id
#caja2 lo hacemos en forma separada:
<?php //esto no va
#caja2 {
  position:relative;
  left:15px;
  top:5px;
}
?>//esto no va
Aquí es donde inicializamos la propiedad position con el valor relative y
desplazamos el elemento 15 píxeles a la derecha y 5 píxeles hacia abajo.
Tengamos en cuenta que se asigna un valor muy grande a la propiedad top se
superpone este elemento con el contenido del tercer div.













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar