1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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" } ) }}
|
