Como mover un elemento con CSS sin que deje de ocupar su lugar

Mover elementos sin dejar espacios vacios

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

Mover elemnto con css

Descargar Ejemplo

Deja un comentario