Si est desarrollando sitios web o aplicaciones, es probable que haya tenido que lidiar con la tarea de crear un bot n que debe presionarse en el borde inferior del bloque. A menudo, esta tarea se produce cuando se crea un pie de p gina del sitio o cuando se coloca el bot n "M s" debajo del bloque de informaci n. En este art culo, explicaremos c mo implementar esta tarea con CSS.
Una forma de lograr el resultado deseado es usar la propiedad position con el valor absolute. Esto permite que el elemento tenga un posicionamiento absoluto dentro del bloque principal. Para presionar el bot n en el borde inferior del bloque, debe especificar las siguientes propiedades para el bot n:
- Bot n presionado en el borde inferior del bloque con CSS: m todos simples para lograr el resultado deseado
- Posicionamiento del elemento en la parte inferior del bloque
- Uso de la propiedad align-self para alinear el bot n
- A adir sangr a para presionar el bot n en el borde inferior
- Trabajar con flexboxes y alinear elementos
- Uso de la propiedad position: absolute
- Aplicar la propiedad bottom para presionar el bot n en el borde inferior
- Usando CSS Grid para crear un bot n presionado en el borde inferior
- Pregunta-respuesta
- C mo es posible presionar un bot n en el borde inferior de un bloque con CSS?
- C mo crear un bot n que siempre se pegue al borde inferior del bloque, incluso cuando se cambia el Tama o de la ventana?
- C mo cambio la altura del bloque con el bot n para que siempre permanezca presionado contra el borde inferior?
- C mo presiono el bot n en el borde inferior del bloque solo a un cierto ancho de pantalla?
El bot n se presiona en el borde inferior del bloque con CSS: m todos simples para lograr el resultado deseado
Un escenario com n en las p ginas web es colocar botones u otros controles en la parte inferior de un bloque. Esto puede ser til para formularios o barras de herramientas, por ejemplo. En este art culo, veremos algunas t cnicas simples sobre c mo hacer que un bot n se presione en el borde inferior de un bloque con CSS.
Uso del posicionamiento absoluto
Una de las formas m s f ciles de lograr el resultado deseado es utilizar el posicionamiento absoluto del bot n. Para hacer esto, debe establecer la propiedad position: relative; del elemento principal del bloque, y el bot n de la propiedad position: absolute; bottom: 0;. Por lo tanto, el bot n se presionar en el borde inferior del bloque.
HTML CSS .btn {
position: absolute; } .parent { display: flex;
Uso de sangr a negativa y posicionamiento
Otro enfoque para presionar un bot n en el borde inferior de un bloque es usar relleno negativo y posicionar los elementos. Estableciendo las propiedades margin-top: auto; y position: relative; el elemento principal del bloque y el bot n, las propiedades margin-top: - el valor deseado; y position: relative;, podemos lograr el resultado deseado.
HTML
- CSS
Contenido del bloque
- Bot n
.parent {
position: relative;
margin-bottom: -30px;
}
.btn {
position: relative;
- margin-top: -30px;
- }
- Estas son solo algunas de las formas posibles de presionar un bot n en el borde inferior de un bloque con CSS. La elecci n de un m todo espec fico depende del contexto y los requisitos del proyecto. Es importante experimentar y encontrar la mejor soluci n para cada problema en particular.
Posicionamiento del elemento en la parte inferior del bloque
- Hay varias formas de presionar un bot n en el borde inferior de un bloque con CSS:
- Uso de la propiedad position: absolute;
- Al definir el posicionamiento absoluto de un elemento, puede asignarle las propiedades bottom: 0; y left: 0; para alinearlo en la parte inferior e izquierda del bloque.
- Uso de la propiedad position: fixed;
Al establecer un posicionamiento fijo de un elemento, puede asignarle las propiedades bottom: 0; y left: 0; para alinearlo en la parte inferior e izquierda de la pantalla. El elemento siempre se posicionar en relaci n con la ventana gr fica.
Uso de la propiedad display: flex;
Si utiliza flexbox, puede establecer la propiedad display: flex; en el contenedor y agregar la propiedad align-items: flex-end; para ajustar el elemento al borde inferior del bloque.
La elecci n del m todo adecuado depende del contexto de uso y de los requisitos de marcado y comportamiento del elemento.
Uso de la propiedad align-self para alinear el bot n
- Una forma de presionar un bot n en el borde inferior de un bloque con CSS es usar la propiedad align-self. Esta propiedad se aplica al bloque principal y le permite alinear los elementos secundarios a lo largo del eje principal del bloque.
- Para crear un bot n que se presionar en el borde inferior del bloque, siga estos pasos::
- Cree un bloque principal con un elemento
- , que establezca las dimensiones deseadas utilizando las propiedades CSS width y height.
Dentro del bloque principal, cree un bot n con un elemento .
| Aplique la propiedad align-self: flex-end; al bloque principal. Esta propiedad alinear el elemento secundario a lo largo del eje principal del bloque (horizontalmente, en este caso) y lo presionar contra el borde inferior del bloque. | Bot n ` `css .parent-block { width: 200px; height: 150px; display: flex; align-self: flex-end; } |
.button {
/ * estilos de bot n */
}
`
En este ejemplo, el bot n se presionar en el borde inferior de un bloque con dimensiones de 200px por 150px. Si es necesario, puede cambiar el Tama o del bloque y el bot n, as como aplicar estilos adicionales para lograr el aspecto deseado.
A adir sangr a para presionar el bot n en el borde inferior
Para presionar un bot n en el borde inferior de un bloque con CSS, se pueden usar varios m todos.
- 1) Uso de la propiedad position:
- Establezca el contenedor en la propiedad position: relative para crear un contexto para posicionar el bot n.
- 2) Uso de la propiedad margin-top:
Coloque el bot n dentro del recipiente.
Establezca el bot n en la propiedad position: absolute y bottom: 0 para alinearlo con el borde inferior del contenedor.
Coloque el bot n despu s del resto del contenido del bloque.
Establezca el bot n en la propiedad margin-top: auto para establecer la sangr a autom tica en la parte superior.
3) Uso de la propiedad flexbox:
Establezca el bloque principal en la propiedad display: flex.
Establezca el bloque principal en la propiedad Flex-direction: column para que los elementos est n dispuestos verticalmente.
Establezca el bloque principal en la propiedad justify-content: space-between para crear espacio entre los elementos.
Coloque el bot n dentro del bloque principal.
Estos m todos le permiten presionar un bot n en el borde inferior del bloque con CSS y crear una interfaz efectivamente alineada.
Trabajar con flexboxes y alinear elementos
Flexbox es uno de los m todos de dise o que le permite controlar la ubicaci n de los elementos dentro de un contenedor. Es especialmente til cuando desea alinear elementos horizontal o verticalmente.
Para utilizar flexbox, debe establecer la propiedad display: flex en el elemento contenedor. A continuaci n, puede personalizar la ubicaci n de los elementos dentro del contenedor mediante varias propiedades.
Propiedades b sicas de flexbox:
justify-content: permite alinear los elementos horizontalmente dentro del contenedor. Por ejemplo, la propiedad justify-content: center alinea los elementos en el centro.
align-items: le permite alinear elementos verticalmente dentro de un contenedor. Por ejemplo, la propiedad align-items: flex-end alinea los elementos en el borde inferior.
flex-direction: especifica la direcci n en la que se encuentran los elementos dentro del contenedor. Por ejemplo, la propiedad Flex-direction: column colocar los elementos verticalmente.
flex-wrap: permite ajustar los elementos a una nueva l nea si el contenedor no puede contenerlos. Por ejemplo, la propiedad flex-wrap: wrap permitir que los elementos se muevan a una nueva l nea.Considere un ejemplo del uso de flexbox para alinear un bot n en el borde inferior del bloque.
Bot n.container {
display: flex;
flex-direction: column;
justify-content: flex-end;align-items: center;
}
.button {
margin-top: auto;
}
En este ejemplo, un bloque con una clase .container es un contenedor para un bot n con una clase .button. Para presionar el bot n en el borde inferior del bloque, establezca la propiedad display: flex para el contenedor y agregue las propiedades flex-direction: column, justify-content: flex-end y align-items: center. Al escribir la propiedad margin-top: auto para el bot n, lo haremos presionado al borde inferior del bloque.
Por lo tanto, los flexbox ofrecen amplias opciones para controlar la ubicaci n de los elementos en una p gina. Usando una combinaci n de diferentes propiedades, puede lograr el efecto Visual deseado y simplificar el marcado.
Uso de la propiedad position: absolute
Propiedad position: absolute le permite establecer un elemento de posicionamiento absoluto con respecto a su elemento primario m s cercano, con un posicionamiento que es diferente de static (el valor predeterminado).
Cuando se utiliza la propiedad position: absolute, el elemento se extraer del flujo normal del documento y su posici n estar determinada por los valores dados de las propiedades top, right, bottom, left.
Para presionar un bot n en el borde inferior de un bloque con CSS, puede especificar que el bloque con el bot n posicione relative para que el bot n se posicione exactamente con respecto a ese bloque.
Ejemplo de uso de la propiedad position: absolute para un bot n presionado en el borde inferior de un bloque:
Crear un bloque de contenedores con posicionamiento relative: