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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
---
title: Top
slug: Web/CSS/top
tags:
- CSS
- CSS Reference
- Referencia_CSS
- Todas_las_Categorías
- para_revisar
- páginas_a_traducir
translation_of: Web/CSS/top
---
<p>{{ CSSRef() }}</p>
<h3 id="Sumario" name="Sumario">Sumario</h3>
<p>La propiedad <code>top</code> especifica parte de la posición de un elemento posicionado. No tiene efecto en elementos no posicionados.</p>
<p>Para los elementos con una posición absoluta (aquellos que tienen la propiedad {{ Cssxref("position") }}<code>: absolute</code> o {{ Cssxref("position") }}<code>: fixed</code>), determina la distancia entre el borde superior del elemento y el borde superior del bloque que lo contiene.</p>
<p>Para los elementos con una posición relativa (aquellos que tienen la propiedad {{ Cssxref("position") }}<code>: relative</code>), determina el desplazamiento hacia abajo que tendrá el elemento con respecto a su posición normal.</p>
<p>Cuando se define tanto la propiedad <code>top </code>como {{cssxref("bottom")}} para un elemento, y {{cssxref("height")}} no se ha definido, tiene un valor <code>auto </code>o 100%, tanto la distancia <code>top </code>como {{cssxref("bottom")}} se respetan. Si {{cssxref("height")}} está definida, la aplicación de la propiedad <code>top </code>tiene precedencia y {{cssxref("bottom")}} será ignorada.</p>
<ul>
<li>{{ Xref_cssinitial() }}: {{ Cssxref("auto") }}</li>
<li>Aplicable a: <a href="/es/CSS/position" title="es/CSS/position">Posicionar Elementos</a></li>
<li>{{ Xref_cssinherited() }}: no</li>
<li>Porcentajes: se refieren a la altura del bloque contenedor.</li>
<li>Medio: {{ Xref_cssvisual() }}</li>
<li>{{ Xref_csscomputed() }}: valor absoluto, porcentaje ó auto.</li>
</ul>
<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
<pre class="eval notranslate"> top: <longitud> | <porcentaje> | auto | inherit
</pre>
<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
<pre class="notranslate"> /* se puede también usar unidades px para posicionar body para luego operar con el div */
body{
width: 100%;
height: 100%;
}
/* ahora podemos operar con unidades de porcentajes (con al 100% respecto de body) */
div{
position:absolute;
left:15%;
top:30%;
bottom:30%;
width:70%;
height:40%;
text-align:left;
border: 3px rgb(0,0,0) solid;
}
</pre>
<pre class="notranslate"> <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml" />
<title>Mozzila.org height top left width porcentaje CSS</title>
<style type="text/css">
/* se puede también usar unidades px para posicionar body para luego operar con el div */
body{
width: 100%;
height: 100%;
}
/* ahora podemos operar con unidades de porcentajes (con respecto al 100% del body) */
div{
position:absolute;
left:15%;
top:30%;
bottom:30%;
width:70%;
height:40%;
text-align:left;
border: 3px rgb(0,0,0) solid;
}
</style>
</head>
<body>
<center>
<div>
...Contenido...
</div>
</center>
</body>
</html>
</pre>
<h3 id="Notas" name="Notas"></h3>
<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
<ul>
<li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top">CSS 2.1</a></li>
<li><a class="external" href="http://www.w3.org/Style/CSS/current-work#positioning">CSS 3</a></li>
</ul>
<h3 id="Compatibilidad_entre_navegadores" name="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h3>
<table class="standard-table">
<tbody>
<tr>
<th>Navegador</th>
<th>Versión mínima</th>
</tr>
<tr>
<td>Internet Explorer</td>
<td>?</td>
</tr>
<tr>
<td>Firefox</td>
<td>1</td>
</tr>
<tr>
<td>Netscape</td>
<td>?</td>
</tr>
<tr>
<td>Opera</td>
<td>?</td>
</tr>
<tr>
<td>Safari</td>
<td>?</td>
</tr>
</tbody>
</table>
<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
<p>{{ Cssxref("position") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }}, {{ Cssxref("left") }}</p>
|
