El Posicionamiento en una Hoja de Estilo CSS
El posicionamiento en una
hoja de estilo hace referencia al lugar (coordenadas) que puede ocupar
cualquier contenido de una caja dentro de una página web. Proporcionan al diseñador un dominio total de
la estructura de la página sin necesidad de recurrir al uso de tablas,
obteniendo así una buena organización del código HTML o XHTML.
Declaración de sentencia CSS
Para trabajar con
posiciones dentro de una página web se utiliza la propiedad position esta puede
tomar los siguientes valores:
“position:
static”:
es el valor predefinido por defecto de todos los elementos HTML. Los elementos
se van colocando uno a continuación de otro, cuando se utiliza este valor.
“position: absolute”: permite colocar la posición
de una caja en cualquier punto de la página de manera completamente
independiente de los demás elementos, los cuales pueden además superponerse por
encima o por debajo.
“position:
relative”: desplaza
una caja respecto de su posición original.
La propiedad desplazamiento de
la caja se controla con las propiedades top, right, bottom y left, cabe
destacar que para el valor static las propiedades anteriores no se utilizan.
Ejemplo:
Enlace para ver el ejemplo:
Enlace para descargar:
O utilizas el siguiente código:
Codigo
<html>
<head>
<title>Uso de las etiquetas
de posicionamiento</title>
<link type="text/css"
rel="stylesheet" href="miCSS.css" />
<style
type="text/css">
}
.estatico{
position:
static
background-color:yellow;
}
.absoluto{
position:absolute;
left:50px;
top:400px;
background-color:yellow;
}
.relativo{
position: relative;
left:300px;
top:50px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="head"
class="cabecera">
<h1>EJEMPLO DE POSICIONAMIENTO CON CSS</h1>
</div>
<div id="estatico"
class="estatico">
</div>
<div id="absoluto" class="absoluto">
</div>
<div id="relativo"
class="relativo">
</div>
</body>
</html>
Desarrollo de sitios web con php, java script, html5, css, tiendas virtuales, manejadores de contenido cms, wordpress y joomla.
No hay comentarios.:
Publicar un comentario
Gracias por tu comentario