Como mover un elemento con CSS sin que deje de ocupar su lugar
Css | Escrito por Ezequiel M. | Junio - 12 - 2009
En el ejemplo tenemos un pequeño menú con 6 opciones, vamos a mover la del centro unos pixeles arriba sin que deje de ocupar su espacio en la lista. Con Position:relative se puede mover un elemento sin que este deje vacío su lugar de origen.
Los Elementos 1, 3, 4, 5 y 6 se mantienen intactos sin ser afectados por el Elemento 2. Para modificar su ubicación tenemos que usar las propiedades Top y Left con valores aceptados por CSS, en este caso use pixeles con un valor negativo para que este se mueva hacia arriba.
Código CSS:
ul{
color:#FFFFFF;
margin-top:50px;
}
li{
display:inline;
background-color:#003366;
border:1px solid #003333;
margin-left:10px;
}
.mover{
position:relative;
top:-20px;
}
Código XTML:
- Elemento 1
- Elemento 2
- Elemento 3
- Elemento 4
- Elemento 5
- Elemento 6
