diff options
Diffstat (limited to 'files/es/web/css/bottom/index.html')
| -rw-r--r-- | files/es/web/css/bottom/index.html | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/files/es/web/css/bottom/index.html b/files/es/web/css/bottom/index.html new file mode 100644 index 0000000000..6d26cf7c97 --- /dev/null +++ b/files/es/web/css/bottom/index.html @@ -0,0 +1,86 @@ +--- +title: bottom +slug: Web/CSS/bottom +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/bottom +--- +<p> +</p><p><< <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a> +</p> +<h3 id="Resumen" name="Resumen"> Resumen </h3> +<p>La propiedad <code>bottom</code> especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código). +</p><p>Para los elementos con una posición absoluta (aquellos que tienen la propiedad <code>position: absolute</code> o <code>position: fixed</code>), la propiedad bottom determina la distancia entre el borde inferior del elemento y el borde inferior de su bloque contenedor. +</p><p>Para los elementos con una posición relativa (los que tienen la propiedad <code>position: relative</code>), la propiedad bottom determina la distancia que el elemento se mueve hacia arriba desde su posición normal. Sin embargo, la propiedad {{ Cssxref("top") }} se antepone a la propiedad bottom, por lo que si <code>top</code> no es <code>auto</code>, el valor computado de <code>bottom</code> es el valor negativo del valor computado de <code>top</code>. +</p> +<ul><li> {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("auto", "automático") }} +</li><li> Se aplica a: {{ Cssxref("position", "la posición de los elementos") }} +</li><li> {{ Cssxref("inheritance", "Heredado") }}: no +</li><li> Porcentajes: se refieren a la altura del bloque contenedor. +</li><li> Medio: {{ Cssxref("Media:Visual", "visual") }} +</li><li> {{ Cssxref("computed value", "Valor calculada") }}: valor absoluto, porcentaje o auto. +</li></ul> +<h3 id="Sintaxis" name="Sintaxis"> Sintaxis </h3> +<pre class="eval"> bottom: <length> | <percentage> | auto | inherit +</pre> +<h3 id="Valores" name="Valores"> Valores </h3> +<dl><dt> <length> </dt><dd> Una longitud, usada como se describe en el <a href="#Resumen">resumen</a>. Puede ser un valor negativo, cero o un valor positivo. +</dd><dt> <percentage> </dt><dd> Un porcentaje de la altura del bloque contenedor, usado como se describe en el <a href="#Resumen">resumen</a>. +</dd><dt> <code>auto</code> </dt><dd> Para los elementos con posición absoluta, el elemento se posiciona en base a la propiedad {{ Cssxref("top") }} y por tanto se trata <code>height: auto</code> como una altura basada en el contenido del elemento. Para los elementos posicionados como relativos, especifica un desplazamiento desde su posición normal basada en la propiedad {{ Cssxref("top") }} o si, <code>top</code> es también <code>auto</code>, no se produce desplazamiento alguno. +</dd><dt> <code>inherit</code> </dt><dd> Recoge el valor que tenga el elemento padre (que puede no ser el bloque contenedor). Este valor calculado es tratado como si fuera un valor <length>, <percentage> o <code>auto</code>. +</dd></dl> +<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3> +<pre>element { + position: absolute; + bottom: 20px; + height: 200px; + border: 1px solid #000; +} +</pre> +<p>El siguiente ejemplo permite contrastar entre <code>position:absolute</code> y <code>position:fixed</code>. Cuando el texto ocupa un espacio más alto que la porción visible de la página (la porción visible en la ventana del navegador) los bloques posicionados con <code>position:absolute</code> se desplazarán junto con la página, mientras que los bloques posicionados con <code>position:fixed</code>, no lo harán. +</p> +<ul><li><b>Atención</b>: IE6 <b>no</b> soporta el código <code>position:fixed</code>. +</li></ul> +<pre><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> +<title>Position at bottom, absolute or fixed</title> +<style type="text/css"> +p {font-size:30px; line-height:3em;} +div.pos {width:49%; text-align:center; border:2px solid #00f;} +div#abs {position:absolute; bottom:0; left:0;} +div#fix {position:fixed; bottom:0; right:0;} +</style> +</head> +<body> + <p>Esto<br>es<br>un texto<br>alto,<br>alto, + <br>alto,<br>alto,<br>alto<br>de prueba.</p> + <div id="fix" class="pos"><p>Fixed</p></div> + <div id="abs" class="pos"><p>Absolute</p></div> +</body> +</html></pre> +<h3 id="Notas" name="Notas"> Notas </h3> +<p>Para los elementos posicionados de forma absoluta cuyo bloque contenedor sea un elemento de tipo bloque, esta propiedad es un desplazamiento a partir del borde de relleno (padding) de dicho elemento. +</p><p>Para los elementos posicionados de forma absoluta, la propiedad <code>bottom</code> no tiene efectos visibles cuando los valores {{ Cssxref("top") }}, {{ Cssxref("height") }}, y {{ Cssxref("margin-top") }} <i>no</i> son <code>auto</code> (que es el valor por defecto para <code>top</code> y <code>height</code>). +</p> +<h3 id="Especificaciones" name="Especificaciones"> Especificaciones </h3> +<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom">CSS 2.1 (en)</a> +</li><li> <a class="external" href="http://www.w3.org/Style/CSS/current-work#positioning">CSS 3 (en)</a> +</li></ul> +<h3 id="Compatibilidad_entre_navegadores" name="Compatibilidad_entre_navegadores"> Compatibilidad entre navegadores </h3> +<span class="comment">This is as far back as the documentaion goes.</span><table class="standard-table"> <tbody><tr> <th>Navegador</th> <th>Versión mínima</th> </tr> <tr> <td>Internet Explorer</td> <td>5</td> </tr> <tr> <td>Firefox</td> <td>1</td> </tr> <tr> <td>Netscape</td> <td>6</td> </tr> <tr> <td>Opera</td> <td>6</td> </tr> +</tbody></table> +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3> +<p>{{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("left") }} +</p><p><br> +</p> +<div class="noinclude"> +<p><span class="comment">Categorías</span> +</p><p><span class="comment">Interwiki Languages</span> +</p> +</div> +{{ languages( { "fr": "fr/CSS/bottom", "pl": "pl/CSS/bottom", "en": "en/CSS/bottom" } ) }} |