-
Cómo conseguir un elemento CSS para mostrar en la parte inferior de un Div
-
El posicionamiento absoluto hace que sea posible decir que el navegador exactamente dónde colocar un elemento en la pantalla. Si usted quiere poner una caja en la parte inferior de la pantalla, por ejemplo, puede establecer su posición de "absoluta" y luego añadir "de abajo: 0;". Conseguir el cuadro de flotar hacia la parte inferior de su elemento que contiene, como un div, requiere una mayor línea de código. Si el elemento que contiene tiene una posición relativa, entonces el elemento alineado abajo irá exactamente donde lo desee, en la parte inferior de la div.
Instrucciones
1 Obtener el ID de ambos los elementos principales y secundarios de código HTML de su página web. El elemento hijo es el que desea mostrar en el fondo de un div. Esto puede ser cualquier cosa, como un párrafo, la imagen o el enlace. El div que contiene este elemento es el elemento principal:
<Div id = "contenedor">
<Div id = "caja"> <div>
</ Div>En este ejemplo, el div "contenedor" es el elemento principal. La "caja" div niño, y es lo que va a ir en la parte inferior de la "envoltura".
2 Abra el archivo de hoja de estilo CSS o agregar código CSS entre un par de "<style>" etiquetas que se encuentran en la parte superior del HTML. Añadir estas etiquetas entre el "<head>" etiquetas si no los encuentra:
<Style type = "text / css">
</ Style>3 Configurar el elemento alineado abajo con posicionamiento absoluto, a continuación, establecer la posición inferior a cero:
caja {
position: absolute;
parte inferior: 0;
}Si estar de acuerdo con el ejemplo "caja", también necesita una anchura, altura y un color de fondo para hacer la caja y llenarla:
caja {
position: absolute;
parte inferior: 0;
Anchura: 200px;
altura: 200px;
background-color: rojo;
}4 Añadir posicionamiento relativo a la div padre. También se puede dar el div una altura, especialmente si usted está siguiendo junto con el ejemplo "caja":
envoltorio {
position: relative;
altura: 400px;
}Cuando das posicionamiento con relación a un elemento padre, todos sus hijos estará restringido dentro de sus límites. Si no se utiliza este truco, entonces el elemento que desee alinear inferior flotará hacia la parte inferior de la pantalla del navegador.
