-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathposition - CSS _ MDN.html
More file actions
259 lines (220 loc) · 162 KB
/
position - CSS _ MDN.html
File metadata and controls
259 lines (220 loc) · 162 KB
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<!-- saved from url=(0054)https://developer.mozilla.org/es/docs/Web/CSS/position -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/favicon144.png"><link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/favicon114.png"><link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/favicon72.png"><link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/favicon57.png"><meta name="theme-color" content="#ffffff"><link rel="manifest" href="https://developer.mozilla.org/manifest.json"><script>Array.prototype.flat&&Array.prototype.includes||document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.flat%2Ces6"><\/script>')</script><title>position - CSS | MDN</title><link rel="preload" as="font" type="font/woff2" crossorigin="" href="https://developer.mozilla.org/static/media/ZillaSlab-Bold.subset.0beac26b.woff2"><link rel="alternate" title="position" href="https://developer.mozilla.org/es/docs/Web/CSS/position" hreflang="es"><link rel="alternate" title="position" href="https://developer.mozilla.org/en-US/docs/Web/CSS/position" hreflang="en"><meta name="description" content="La propiedad position de CSS especifica cómo un elemento es posicionado en el documento. Las propiedades top, right, bottom, y left determinan la ubicación final de los elementos posicionados."><meta name="robots" content="index, follow"><link rel="canonical" href="https://developer.mozilla.org/es/docs/Web/CSS/position"><style media="print">.breadcrumbs-locale-container,.document-toc-container,.on-github,.page-footer,.page-header-main,nav.sidebar,ul.prev-next{display:none!important}.article,.article pre{padding:2px}.article pre{border-left-width:2px}</style><link href="./position - CSS _ MDN_files/main.43200da2.chunk.css" rel="stylesheet"><script>
LUX=(function(){var a=("undefined"!==typeof(LUX)&&"undefined"!==typeof(LUX.gaMarks)?LUX.gaMarks:[]);var d=("undefined"!==typeof(LUX)&&"undefined"!==typeof(LUX.gaMeasures)?LUX.gaMeasures:[]);var j="LUX_start";var k=window.performance;var l=("undefined"!==typeof(LUX)&&LUX.ns?LUX.ns:(Date.now?Date.now():+(new Date())));if(k&&k.timing&&k.timing.navigationStart){l=k.timing.navigationStart}function f(){if(k&&k.now){return k.now()}var o=Date.now?Date.now():+(new Date());return o-l}function b(n){if(k){if(k.mark){return k.mark(n)}else{if(k.webkitMark){return k.webkitMark(n)}}}a.push({name:n,entryType:"mark",startTime:f(),duration:0});return}function m(p,t,n){if("undefined"===typeof(t)&&h(j)){t=j}if(k){if(k.measure){if(t){if(n){return k.measure(p,t,n)}else{return k.measure(p,t)}}else{return k.measure(p)}}else{if(k.webkitMeasure){return k.webkitMeasure(p,t,n)}}}var r=0,o=f();if(t){var s=h(t);if(s){r=s.startTime}else{if(k&&k.timing&&k.timing[t]){r=k.timing[t]-k.timing.navigationStart}else{return}}}if(n){var q=h(n);if(q){o=q.startTime}else{if(k&&k.timing&&k.timing[n]){o=k.timing[n]-k.timing.navigationStart}else{return}}}d.push({name:p,entryType:"measure",startTime:r,duration:(o-r)});return}function h(n){return c(n,g())}function c(p,o){for(i=o.length-1;i>=0;i--){var n=o[i];if(p===n.name){return n}}return undefined}function g(){if(k){if(k.getEntriesByType){return k.getEntriesByType("mark")}else{if(k.webkitGetEntriesByType){return k.webkitGetEntriesByType("mark")}}}return a}return{mark:b,measure:m,gaMarks:a,gaMeasures:d}})();LUX.ns=(Date.now?Date.now():+(new Date()));LUX.ac=[];LUX.cmd=function(a){LUX.ac.push(a)};LUX.init=function(){LUX.cmd(["init"])};LUX.send=function(){LUX.cmd(["send"])};LUX.addData=function(a,b){LUX.cmd(["addData",a,b])};LUX_ae=[];window.addEventListener("error",function(a){LUX_ae.push(a)});LUX_al=[];if("function"===typeof(PerformanceObserver)&&"function"===typeof(PerformanceLongTaskTiming)){var LongTaskObserver=new PerformanceObserver(function(c){var b=c.getEntries();for(var a=0;a<b.length;a++){var d=b[a];LUX_al.push(d)}});try{LongTaskObserver.observe({type:["longtask"]})}catch(e){}};
</script><script src="./position - CSS _ MDN_files/lux.js.descarga" async="" defer="" crossorigin="anonymous"></script><script>
// Mozilla DNT Helper
/* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */ if(typeof Mozilla==='undefined'){var Mozilla={}}Mozilla.dntEnabled=function(dnt,ua){'use strict';var dntStatus=dnt||navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack;var userAgent=ua||navigator.userAgent;var anomalousWinVersions=['Windows NT 6.1','Windows NT 6.2','Windows NT 6.3'];var fxMatch=userAgent.match(/Firefox\/(\d+)/);var ieRegEx=/MSIE|Trident/i;var isIE=ieRegEx.test(userAgent);var platform=userAgent.match(/Windows.+?(?=;)/g);if(isIE&&typeof Array.prototype.indexOf!=='function'){return false}else if(fxMatch&&parseInt(fxMatch[1],10)<32){dntStatus='Unspecified'}else if(isIE&&platform&&anomalousWinVersions.indexOf(platform.toString())!==-1){dntStatus='Unspecified'}else{dntStatus={'0':'Disabled','1':'Enabled'}[dntStatus]||'Unspecified'}return dntStatus==='Enabled'?true:false};
// only load GA if DNT is not enabled
if (Mozilla && !Mozilla.dntEnabled()) {
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-36116321-5', 'mozilla.org');
ga('set', 'anonymizeIp', true);
}
</script><script async="" src="./position - CSS _ MDN_files/analytics.js.descarga"></script><script src="./position - CSS _ MDN_files/runtime-main.a467abb6.js.descarga" defer=""></script><script src="./position - CSS _ MDN_files/2.8d4a1ed2.chunk.js.descarga" defer=""></script><script src="./position - CSS _ MDN_files/main.4bbdcf82.chunk.js.descarga" defer=""></script><script charset="utf-8" src="./position - CSS _ MDN_files/5.d05a202f.chunk.js.descarga"></script></head><body><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="https://developer.mozilla.org/es/docs/Web/CSS/position#content">Skip to main content</a></li><li><a id="skip-search" href="https://developer.mozilla.org/es/docs/Web/CSS/position#main-q">Skip to search</a></li></ul><div class="page-wrapper document-page"><header class="page-header"><a href="https://developer.mozilla.org/es/" class="logo" aria-label="MDN Web Docs"><svg viewBox="0 0 451.74 135" role="img"><g id="Layer_2" data-name="Layer 2"><path class="cls-1" d="M7.14,8.35V119.41H118.19V8.35Zm103.71,56c-.48.92-1,1.79-1.46,2.71a3.44,3.44,0,0,1-3.54,2,2.4,2.4,0,0,0-1.55.5c-1.37.9-2.76,1.79-4.18,2.63a7.33,7.33,0,0,1-6.35.34,29.71,29.71,0,0,0-10.63-2,11.7,11.7,0,0,0-9.46,4.31,14.84,14.84,0,0,0-2.13,4.29c-1.24,3.07-2.3,21.38-2.3,26.05,0,0-17.62-3.42-34.15-20.34l4.31-11.32H25.91l9.76-10.35H18.87l9.77-10.34H12.69L30.45,34A40.9,40.9,0,0,1,50.22,23.17c7.1-1.22,8.93-.53,13.31.77l2.43.73.85.25,3.1.95a12.56,12.56,0,0,0,6.21.09,11.37,11.37,0,0,1,8.25,1,8.24,8.24,0,0,1,4.1,6.22,7.29,7.29,0,0,0,3.61,5.49,59.45,59.45,0,0,0,9.32,4.11c2.27.86,4.54,1.84,6.79,2.72a6.81,6.81,0,0,1,2.86,2.06,4.81,4.81,0,0,1,1.1,2.73c.14,2,.37,4,.47,6h0A15.24,15.24,0,0,1,110.85,64.32Z"></path><path class="cls-1" d="M320.12,39.62a5.42,5.42,0,0,0-4.53,2.13,7.36,7.36,0,0,0-1.7,4.43v2.36a6.28,6.28,0,0,0,1.7,4.46,5.63,5.63,0,0,0,4.3,1.82,5.12,5.12,0,0,0,4.57-2.27A9.7,9.7,0,0,0,326,47a8.11,8.11,0,0,0-1.67-5.52A5.36,5.36,0,0,0,320.12,39.62Z"></path><path class="cls-1" d="M387.38,39.53a5.52,5.52,0,0,0-4.7,2.15,8.8,8.8,0,0,0-1.63,5.49,9.23,9.23,0,0,0,1.58,5.45,5.38,5.38,0,0,0,4.7,2.25,5.61,5.61,0,0,0,4.74-2.2,8.91,8.91,0,0,0,1.68-5.59A8.24,8.24,0,0,0,392,41.56,5.76,5.76,0,0,0,387.38,39.53Z"></path><path class="cls-1" d="M299.47,41.35a4.34,4.34,0,0,0-4-1.92,4.55,4.55,0,0,0-3.89,1.73A8.37,8.37,0,0,0,290,45.33h10.48A6.3,6.3,0,0,0,299.47,41.35Z"></path><path class="cls-1" d="M357.74,30.75H352V54.06h5.72q5.47,0,8.35-3T369,42.41q0-5.43-2.88-8.55T357.74,30.75Z"></path><path class="cls-1" d="M121.55,8.35v70.8h323V8.35ZM163.76,30.8h-4V54h3.68v3.73H152.19V54h3.31V36.79h-.19l-9.63,19.12h-2.12l-10-19.4h-.19V54h3.45v3.73H125.67V54h3.68V30.8h-4V27.07H133l11.66,22.56h.19l11.18-22.56h7.7Zm29.12,22.67q-4.11,4.28-11.38,4.28H167.44V54.06h3.73V30.75h-3.73V27.07h13.83q7.59,0,11.66,4.29a15.4,15.4,0,0,1,4,11A15.33,15.33,0,0,1,192.88,53.47ZM231.77,30.8h-3.68v27h-2.6L208.08,35h-.19V54h4.67v3.73H200.34V54h3.49V30.8h-4V27.07h7.08l16.9,22.09H224V30.8h-4.58V27.07h12.32Zm43.8,27h-3.31l-7.83-23.18h-.19l-7.55,23.18h-3.35L244.56,30.8h-2.65V27.07H253V30.8h-3.87L255,50.71h.23l6.61-19.91H259V27.07h11V30.8h-2.78l6.61,20.1h.23l5.43-20.1h-4.15V27.07h11V30.8h-2.54Zm26.71-1.51a9.66,9.66,0,0,1-6.42,2,10.2,10.2,0,0,1-7.41-2.74c-1.89-1.82-2.83-4.47-2.83-7.93a12.37,12.37,0,0,1,2.64-8.12,9,9,0,0,1,7.32-3.21,8.62,8.62,0,0,1,6.75,2.69,9.65,9.65,0,0,1,2.45,6.52,13.67,13.67,0,0,1-.28,2.69H290q.29,6.71,6.18,6.7a5.2,5.2,0,0,0,3.71-1.18,5.82,5.82,0,0,0,1.67-2.83l3.45.71A7.21,7.21,0,0,1,302.28,56.24Zm25.77-1.63c-1.51,2.4-3.92,3.61-7.22,3.61s-5.84-1.29-7.22-3.87c0,.25-.1.82-.21,1.7s-.19,1.44-.22,1.7H309c.16-1,.31-2,.47-3.07a21.42,21.42,0,0,0,.24-3.16v-23h-3.4V25.27h7.55V40.9a9.76,9.76,0,0,1,2.67-3.28,7.33,7.33,0,0,1,4.74-1.4A8.48,8.48,0,0,1,327.77,39q2.55,2.74,2.55,7.74A14.6,14.6,0,0,1,328.05,54.61Zm41.39-1.14q-4.11,4.28-11.37,4.28H344V54.06h3.73V30.75H344V27.07h13.83q7.59,0,11.66,4.29a15.41,15.41,0,0,1,4.06,11A15.34,15.34,0,0,1,369.44,53.47Zm25.65,1.68a10.53,10.53,0,0,1-7.9,3.07,10,10,0,0,1-7.63-3,10.93,10.93,0,0,1-2.8-7.83,12.13,12.13,0,0,1,2.69-7.93q2.69-3.3,8-3.3t8,3.28a12,12,0,0,1,2.64,7.76A10.86,10.86,0,0,1,395.09,55.15Zm22.61.57c-1.4,1.66-3.63,2.5-6.68,2.5a9.58,9.58,0,0,1-7.15-2.76q-2.72-2.76-2.71-7.91a12.25,12.25,0,0,1,2.69-8,9.17,9.17,0,0,1,7.5-3.28,15,15,0,0,1,3.82.48,10.37,10.37,0,0,1,3.5,1.65l.85,5.47-3.35.38-.76-3.54a8.07,8.07,0,0,0-4.11-1,4.9,4.9,0,0,0-4.39,2.15,9.93,9.93,0,0,0-1.41,5.55A8.9,8.9,0,0,0,407,52.84a5.23,5.23,0,0,0,4.44,2c2.92,0,4.67-1.7,5.23-5.1l3.5.71A10.34,10.34,0,0,1,417.7,55.72Zm20.48.75a11.68,11.68,0,0,1-6.63,1.75,15.52,15.52,0,0,1-8.26-2.08L424,51l3.26.33-.1,2.74a7,7,0,0,0,2.06.66,12.63,12.63,0,0,0,2.19.19,8.68,8.68,0,0,0,3.66-.75,2.5,2.5,0,0,0,1.63-2.36,2.25,2.25,0,0,0-1.32-2.2,12.65,12.65,0,0,0-3.28-1c-1.31-.22-2.61-.49-3.9-.82a7.5,7.5,0,0,1-3.25-1.7,4.67,4.67,0,0,1-1.33-3.66c0-2.36.88-4,2.62-4.91a12,12,0,0,1,5.6-1.37,15,15,0,0,1,4.08.55,16.65,16.65,0,0,1,3.47,1.39l.47,5.1-3.3.37-.48-3.3a9.5,9.5,0,0,0-4.06-.9,5.62,5.62,0,0,0-2.87.66A2.33,2.33,0,0,0,428,42.27a2.13,2.13,0,0,0,1.3,2.07,11.91,11.91,0,0,0,3.21.92,36.69,36.69,0,0,1,3.82.83,7.46,7.46,0,0,1,3.21,1.74,4.9,4.9,0,0,1,1.3,3.73A5.56,5.56,0,0,1,438.18,56.47Z"></path><path class="cls-1" d="M181.17,30.75h-5.71V54.06h5.71q5.47,0,8.36-3t2.88-8.61q0-5.43-2.88-8.55T181.17,30.75Z"></path><path class="cls-1" d="M121.63,119.32V81.74H236.54v37.58ZM153.22,109h-2v-6.85a4.8,4.8,0,0,0-1.58-4,5.57,5.57,0,0,0-3.55-1.26,5,5,0,0,0-4.92,3.26,4.19,4.19,0,0,0-1.88-2.46,5.82,5.82,0,0,0-3-.8,4.89,4.89,0,0,0-4.56,2.56V97.24h-6.28v3.26h2V109h-2v3.23h9.11V109H131.7v-5.25a4.4,4.4,0,0,1,.69-2.56,2.47,2.47,0,0,1,2.21-1q2.57,0,2.56,3.63v8.41h6.29V109h-2v-5.25a4.47,4.47,0,0,1,.67-2.56,2.42,2.42,0,0,1,2.19-1q2.63,0,2.63,3.63v8.41h6.28Zm9.88-12.07q-4,0-6,2.36a8.41,8.41,0,0,0-2,5.66,7.25,7.25,0,0,0,2.17,5.62,8,8,0,0,0,5.65,2,8.54,8.54,0,0,0,5.94-2.11,7.27,7.27,0,0,0,2.34-5.67,8.21,8.21,0,0,0-2-5.51Q167.13,96.94,163.1,96.94ZM163,109.28a3,3,0,0,1-2.63-1.33,5.68,5.68,0,0,1-.9-3.26,5,5,0,0,1,1-3.28,3.23,3.23,0,0,1,2.61-1.18,3.5,3.5,0,0,1,2.59,1.08,4.56,4.56,0,0,1,1.07,3.31,5.21,5.21,0,0,1-1,3.41A3.33,3.33,0,0,1,163,109.28Zm25-2.3-3.39-.29-.7,2.32H179l8.32-9.54L187,97.24H173.81l-.53,5.25,3.16.34.67-2.36h4.65L173.51,110l.44,2.26h13.13Zm7.62-9.74h-4.46v5.39h4.46Zm0,9.61h-4.46v5.39h4.46Zm13.54-17.49h-4.23l-6.48,22.88h4.22Zm8.68,0h-4.23l-6.45,22.88h4.19Zm15,22.51-.07-2.26a1.22,1.22,0,0,1-.56.1c-.69,0-1-.39-1-1.16v-6.49a4.39,4.39,0,0,0-1.8-3.84,7,7,0,0,0-4.16-1.28,14.55,14.55,0,0,0-3.16.3,24.14,24.14,0,0,0-3.29,1.06l-.56,3.46,3.39.4.5-1.69a2.78,2.78,0,0,1,1.08-.37,11.3,11.3,0,0,1,1.25-.07c1.19,0,1.89.37,2.09,1.1a8.55,8.55,0,0,1,.3,2.26v.5a8.91,8.91,0,0,0-1.18-.11c-.41,0-.81,0-1.21,0a12.64,12.64,0,0,0-4.81.88,3.53,3.53,0,0,0-2.18,3.64,3.66,3.66,0,0,0,1.48,3.33,5.63,5.63,0,0,0,3.11,1,4.67,4.67,0,0,0,3-.91,6.78,6.78,0,0,0,1.8-2,3,3,0,0,0,3.33,3A5.54,5.54,0,0,0,232.85,111.87Zm-9.25-2.32a1.69,1.69,0,0,1-1.36-.52,1.81,1.81,0,0,1-.43-1.21,1.67,1.67,0,0,1,.86-1.68,4.63,4.63,0,0,1,2-.42,7.69,7.69,0,0,1,1.07.07l1.06.13a3.58,3.58,0,0,1-1.08,2.74A3.24,3.24,0,0,1,223.6,109.55Z"></path></g></svg></a><button type="button" class="ghost main-menu-toggle" aria-haspopup="true" aria-label="Show Menu"></button><div class="page-header-main "><nav class="main-nav" aria-label="Main menu"><ul class="main-menu"><li class="top-level-entry-container"><button id="technologies-button" type="button" class="top-level-entry" aria-haspopup="menu" aria-expanded="false">Technologies</button><ul class="technologies " role="menu" aria-labelledby="technologies-button"><li role="none"><a href="https://developer.mozilla.org/es/docs/Web" role="menuitem">Technologies Overview</a></li><li role="none"><a href="https://developer.mozilla.org/es/docs/Web/HTML" role="menuitem">HTML</a></li><li role="none"><a href="https://developer.mozilla.org/es/docs/Web/CSS" role="menuitem">CSS</a></li><li role="none"><a href="https://developer.mozilla.org/es/docs/Web/JavaScript" role="menuitem">JavaScript</a></li><li role="none"><a href="https://developer.mozilla.org/es/docs/Web/Guide/Graphics" role="menuitem">Graphics</a></li><li role="none"><a href="https://developer.mozilla.org/es/docs/Web/HTTP" role="menuitem">HTTP</a></li><li role="none"><a href="https://developer.mozilla.org/es/docs/Web/API" role="menuitem">APIs</a></li><li role="none"><a href="https://developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions" role="menuitem">Browser Extensions</a></li><li role="none"><a href="https://developer.mozilla.org/es/docs/Web/MathML" role="menuitem">MathML</a></li></ul></li><li class="top-level-entry-container"><button id="references-guides-button" type="button" class="top-level-entry" aria-haspopup="menu" aria-expanded="false">References & Guides</button><ul class="references-guides " role="menu" aria-labelledby="references-guides-button"><li role="none"><a href="https://developer.mozilla.org/es/docs/Learn" role="menuitem">Learn web development</a></li><li role="none"><a href="https://developer.mozilla.org/es/docs/Web/Tutorials" role="menuitem">Tutorials</a></li><li role="none"><a href="https://developer.mozilla.org/es/docs/Web/Reference" role="menuitem">References</a></li><li role="none"><a href="https://developer.mozilla.org/es/docs/Web/Guide" role="menuitem">Developer Guides</a></li><li role="none"><a href="https://developer.mozilla.org/es/docs/Web/Accessibility" role="menuitem">Accessibility</a></li><li role="none"><a href="https://developer.mozilla.org/es/docs/Games" role="menuitem">Game development</a></li><li role="none"><a href="https://developer.mozilla.org/es/docs/Web" role="menuitem">...more docs</a></li></ul></li><li class="top-level-entry-container"><button id="feedback-button" type="button" class="top-level-entry" aria-haspopup="menu" aria-expanded="false">Feedback</button><ul class="feedback " role="menu" aria-labelledby="feedback-button"><li role="none"><a href="https://developer.mozilla.org/es/docs/MDN/Contribute/Feedback" role="menuitem">Send Feedback</a></li><li role="none"><a href="https://developer.mozilla.org/es/docs/MDN/Contribute" role="menuitem">Contribute to MDN</a></li><li role="none"><a target="_blank" rel="noopener noreferrer" href="https://github.com/mdn/content/issues/new" role="menuitem">Report a content issue 🌐</a></li><li role="none"><a target="_blank" rel="noopener noreferrer" href="https://github.com/mdn/yari/issues/new" role="menuitem">Report a platform issue 🌐</a></li></ul></li></ul></nav><div class="header-search"><form action="https://developer.mozilla.org/es/search" class="search-form" role="search"><label for="main-q" class="visually-hidden">Search MDN</label><input type="search" name="q" id="main-q" class="search-input-field" placeholder="Search MDN" pattern="(.|\s)*\S(.|\s)*" required=""><input type="submit" class="ghost search-button" aria-label="Search" value=""></form></div><div class="auth-container"><a href="https://developer.mozilla.org/es/users/account/signup-landing?next=%2Fes%2Fdocs%2FWeb%2FCSS%2Fposition" rel="nofollow" class="signin-link">Sign in</a></div></div></header><div class="titlebar-container"><h1 class="title">position</h1></div><div class="breadcrumbs-locale-container"><div class="breadcrumb-container"><nav class="breadcrumbs"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a class="breadcrumb" property="item" typeof="WebPage" href="https://developer.mozilla.org/es/docs/Web"><span property="name">Tecnología para desarrolladores web</span></a><meta property="position" content="1"></li><li property="itemListElement" typeof="ListItem"><a class="breadcrumb-penultimate" property="item" typeof="WebPage" href="https://developer.mozilla.org/es/docs/Web/CSS"><span property="name">CSS</span></a><meta property="position" content="2"></li><li property="itemListElement" typeof="ListItem"><a class="breadcrumb-current-page" property="item" typeof="WebPage" href="https://developer.mozilla.org/es/docs/Web/CSS/position"><span property="name">position</span></a><meta property="position" content="3"></li></ol></nav></div><div class="locale-container"><form class="language-menu"><label for="select_language" class="visually-hidden">Select your preferred language</label> <select id="select_language" name="language"><option value="es">Español</option><option value="/en-US/docs/Web/CSS/position">English (US)</option></select> <button type="submit" class="button minimal">Change language</button></form></div></div><div class="page-content-container"><aside class="document-toc-container"><section class="document-toc"><header><h2>Jump to section</h2><button type="button" class="ghost toc-trigger-mobile" aria-controls="toc-entries" aria-expanded="false">Jump to section</button></header><ul id="toc-entries"><li><a href="https://developer.mozilla.org/es/docs/Web/CSS/position#sintaxis">Sintaxis</a></li><li><a href="https://developer.mozilla.org/es/docs/Web/CSS/position#examples">Examples</a></li><li><a href="https://developer.mozilla.org/es/docs/Web/CSS/position#consideraciones_de_accesibilidad">Consideraciones de accesibilidad</a></li><li><a href="https://developer.mozilla.org/es/docs/Web/CSS/position#specifications">Especificaciones</a></li><li><a href="https://developer.mozilla.org/es/docs/Web/CSS/position#browser_compatibility">Compatibilidad</a></li></ul></section></aside><main id="content" class="main-content" role="main"><article class="article"><div><div></div>
<p>La propiedad <strong><code>position</code></strong> de <a href="https://developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a> especifica cómo un elemento es posicionado en el documento. Las propiedades <a href="https://developer.mozilla.org/es/docs/Web/CSS/top" title="La propiedad top especifica parte de la posición de un elemento posicionado. No tiene efecto en elementos no posicionados."><code>top</code></a>, <a href="https://developer.mozilla.org/es/docs/Web/CSS/right" title="La propiedad right especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código)."><code>right</code></a>, <a href="https://developer.mozilla.org/es/docs/Web/CSS/bottom" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code>bottom</code></a>, y <a href="https://developer.mozilla.org/es/docs/Web/CSS/left" title="La propiedad left especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código)."><code>left</code></a> determinan la ubicación final de los elementos posicionados.</p>
<div><iframe class="interactive" frameborder="0" height="250" src="./position - CSS _ MDN_files/position.html" title="MDN Web Docs Interactive Example" width="100%" loading="lazy"></iframe></div>
<p class="hidden">El código fuente de este ejemplo interactivo se encuentra almacenado en un repositorio de GitHub. Si quisiera contribuir al proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples" class="external">https://github.com/mdn/interactive-examples</a> y envíenos sus contribuciones como un pull request.</p></div><h3 id="tipos_de_posicionamiento"><a href="https://developer.mozilla.org/es/docs/Web/CSS/position#tipos_de_posicionamiento" title="Permalink to Tipos de posicionamiento">Tipos de posicionamiento</a></h3><div><ul>
<li>Un <strong>elemento posicionado </strong>es un elemento cuyo valor <a href="https://developer.mozilla.org/en-US/docs/CSS/computed_value">computado</a> de <code>position</code> es <code>relative</code>, <code>absolute</code>, <code>fixed</code>, o <code>sticky</code>. (En otras palabras, cualquiera excepto <code>static</code>).</li>
<li>Un <strong>elemento posicionado relativamente</strong> es un elemento cuyo valor <a href="https://developer.mozilla.org/en-US/docs/CSS/computed_value">computado</a> de <code>position</code> es <code>relative</code>. Las propiedades <a href="https://developer.mozilla.org/es/docs/Web/CSS/top"><code>top</code></a> y <a href="https://developer.mozilla.org/es/docs/Web/CSS/bottom"><code>bottom</code></a> especifican el desplazamiento vertical desde su posición original; las propiedades <a href="https://developer.mozilla.org/es/docs/Web/CSS/left"><code>left</code></a> y <a href="https://developer.mozilla.org/es/docs/Web/CSS/right"><code>right</code></a> especifican su desplazamiento horizontal.</li>
<li>Un <strong>elemento posicionado absolutamente</strong> es un elemento cuyo valor <a href="https://developer.mozilla.org/en-US/docs/CSS/computed_value">computado</a> de <code>position</code> es <code>absolute</code> o <code>fixed</code>. Las propiedades <a href="https://developer.mozilla.org/es/docs/Web/CSS/top"><code>top</code></a>, <a href="https://developer.mozilla.org/es/docs/Web/CSS/right"><code>right</code></a>, <a href="https://developer.mozilla.org/es/docs/Web/CSS/bottom"><code>bottom</code></a>, y <a href="https://developer.mozilla.org/es/docs/Web/CSS/left"><code>left</code></a> especifican el desplazamiento desde los bordes del <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block"> bloque contenedor</a> del elemento. (El bloque contenedor es el ancestro relativo al cual el elemento está posicionado). Si el elemento tiene márgenes, se agregarán al desplazamiento. el elemento establece un nuevo contexto de formato de bloque para su contenido</li>
<li>Un <strong>elemento posicionado fijamente </strong>es un elemento cuyo valor de <code>position </code><a href="https://developer.mozilla.org/en-US/docs/CSS/computed_value">computado</a> es <code>sticky</code>. Es tratado como un elemento posicionado relativamente hasta que su <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> cruza un límite establecido (como por ejemplo dando a <a href="https://developer.mozilla.org/es/docs/Web/CSS/top"><code>top</code></a> cualquier valor distinto de auto), dentro de su flujo principal (o el contenedor dentro del cual se mueve), desde el cual es tratado como "fijo" hasta que alcance el borde opuesto de su <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a>.</li>
</ul>
<p>La mayoría de las veces, los elementos absolutamente posicionados que tienen su <a href="https://developer.mozilla.org/es/docs/Web/CSS/height" title="La propiedad CSS height especifica la altura del area de contenido de un elemento. El área de contenido está dentro del padding, borde, y margen del elemento."><code>height</code></a> y <a href="https://developer.mozilla.org/es/docs/Web/CSS/width" title="La propiedad CSS width especifica la anchura del area de contenido de un elemento. El área de contenido está dentro del padding, borde, y margen del elemento."><code>width</code></a> establecidos en <code>auto</code> son ajustados hasta acomodarse a su contenido. Sin embargo, elementos non-<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">replaced</a> y absolutamente posicionados se pueden crear para llenar el espacio vertical disponible, especificando tanto <a href="https://developer.mozilla.org/es/docs/Web/CSS/top" title="La propiedad top especifica parte de la posición de un elemento posicionado. No tiene efecto en elementos no posicionados."><code>top</code></a> como <a href="https://developer.mozilla.org/es/docs/Web/CSS/bottom" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code>bottom</code></a>, y dejando <a href="https://developer.mozilla.org/es/docs/Web/CSS/height" title="La propiedad CSS height especifica la altura del area de contenido de un elemento. El área de contenido está dentro del padding, borde, y margen del elemento."><code>height</code></a> sin especificar (es decir, <code>auto</code>). De igual manera se pueden utilizar para llenar el espacio horizontal disponible especificando tanto <a href="https://developer.mozilla.org/es/docs/Web/CSS/left" title="La propiedad left especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código)."><code>left</code></a> como <a href="https://developer.mozilla.org/es/docs/Web/CSS/right" title="La propiedad right especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código)."><code>right</code></a>, y dando a <a href="https://developer.mozilla.org/es/docs/Web/CSS/width" title="La propiedad CSS width especifica la anchura del area de contenido de un elemento. El área de contenido está dentro del padding, borde, y margen del elemento."><code>width</code></a> el valor de <code>auto</code>.</p>
<p>A excepción del caso anteriormente descrito (de elementos posicionados absolutamente rellenando el espacio disponible):</p>
<ul>
<li>Si ambos, <code>top</code> y <code>bottom</code> están especificados (técnicamente, no <code>auto</code>), <code>top</code> gana.</li>
<li>Si ambos, <code>left</code> y <code>right</code>, están especificados, <code>left</code> gana cuando es <code>ltr</code> (Inglés, japonés horizontal, etc.) y <code>right</code> gana cuando <a href="https://developer.mozilla.org/es/docs/Web/CSS/direction"><code>direction</code></a> es <code>rtl</code> (Persa, árabe, hebreo, etc.).</li>
</ul></div><h2 id="sintaxis"><a href="https://developer.mozilla.org/es/docs/Web/CSS/position#sintaxis" title="Permalink to Sintaxis">Sintaxis</a></h2><div><p>La propiedad <code>position</code> es especificada como una palabra única elegida de la siguiente lista de valores.</p></div><h3 id="valores"><a href="https://developer.mozilla.org/es/docs/Web/CSS/position#valores" title="Permalink to Valores">Valores</a></h3><div><dl>
<dt id="static"><code>static</code></dt>
<dd>El elemento es posicionado de acuerdo al flujo normal del documento. Las propiedades <a href="https://developer.mozilla.org/es/docs/Web/CSS/top" title="La propiedad top especifica parte de la posición de un elemento posicionado. No tiene efecto en elementos no posicionados."><code>top</code></a>, <a href="https://developer.mozilla.org/es/docs/Web/CSS/right" title="La propiedad right especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código)."><code>right</code></a>, <a href="https://developer.mozilla.org/es/docs/Web/CSS/bottom" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code>bottom</code></a>, <a href="https://developer.mozilla.org/es/docs/Web/CSS/left" title="La propiedad left especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código)."><code>left</code></a>, and <a href="https://developer.mozilla.org/es/docs/Web/CSS/z-index" title="La propiedad CSS z-index indica el orden de un elemento posicionado y sus descendientes. Cuando varios elementos se superponen, los elementos con mayor valor z-index cubren aquellos con menor valor."><code>z-index</code></a> <em>no tienen efecto</em>. Este es el valor por defecto.</dd>
<dt id="relative"><code>relative</code></dt>
<dd>El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado <em>con relación a sí mismo</em>, con base en los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. El desplazamiento no afecta la posición de ningún otro elemento; por lo que, el espacio que se le da al elemento en el esquema de la página es el mismo como si la posición fuera <code>static</code>. Este valor crea un nuevo <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento">contexto de apilamiento</a>, donde el valor de <code>z-index</code> no es <code>auto</code>. El efecto que tiene <code>relative</code> sobre los elementos <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code>, y <code>table-caption</code> no está definido.</dd>
<dt id="absolute"><code>absolute</code></dt>
<dd>El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la página. Es posicionado relativo a su ancestro posicionado más cercano, si lo hay; de lo contrario, se ubica relativo al <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> inicial. Su posición final está determinada por los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, y <code>left</code>.</dd>
<dd>Este valor crea un nuevo <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento">contexto de apilamiento</a> cuando el valor de <code>z-index</code> no es <code>auto</code>. Elementos absolutamente posicionados pueden tener margen, y no colapsan con ningún otro margen.</dd>
<dt id="fixed"><code>fixed</code></dt>
<dd>El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la página. Es posicionado con relación al <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> inicial establecido por el <a href="https://developer.mozilla.org/es/docs/Glossary/Viewport">viewport</a>, excepto cuando uno de sus ancestros tiene una propiedad <code>transform</code>, <code>perspective</code>, o <code>filter</code> establecida en algo que no sea <code>none</code> (ver <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform" class="external">CSS Transforms Spec</a>), en cuyo caso ese ancestro se comporta como el bloque contenedor. (Notar que hay inconsistencias del navegador con <code>perspective</code> y <code>filter</code> contribuyendo a la formación del bloque contenedor.) Su posición final es determinada por los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, y <code>left</code>.</dd>
<dd>Estos valores siempre crean un nuevo <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento">contexto de apilamiento</a>. En documentos impresos, el elemento se coloca en la misma posición en <em>cada página</em>.</dd>
<dt id="sticky"><code>sticky</code> <span class="icon-only-inline" title="This is an experimental API that should not be used in production code."><i class="icon-beaker"> </i></span></dt>
<dd>El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado <em>con relación a su ancestro que se desplace más cercano y su </em><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> (ancestro en nivel de bloque más cercano) incluyendo elementos relacionados a tablas, basados en los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, y <code>left</code>. El desplazamiento no afecta la posición de ningún otro elmento.</dd>
<dd>Estos valores siempre crean un nuevo <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento">contexto de apilamiento</a>. Nótese que un elemento sticky se "adhiere" a su ancestro más cercano que tiene un "mecanismo de desplazamiento" (creado cuando el <code>overflow</code> es <code>hidden</code>, <code>scroll</code>, <code>auto</code>, o bien <code>overlay</code>), aún si ese ancestro no es el ancestro con desplazamiento más cercano. Esto inhibe efectivamente el comportamiento "sticky" (ver el <a href="https://github.com/w3c/csswg-drafts/issues/865" class="external">Github issue en W3C CSSWG</a>).</dd>
</dl></div><h3 id="sintaxis_formal"><a href="https://developer.mozilla.org/es/docs/Web/CSS/position#sintaxis_formal" title="Permalink to Sintaxis formal">Sintaxis formal</a></h3><div><pre class="syntaxbox notranslate">static <a href="https://developer.mozilla.org/es/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> relative <a href="https://developer.mozilla.org/es/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> absolute <a href="https://developer.mozilla.org/es/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> sticky <a href="https://developer.mozilla.org/es/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> fixed</pre></div><h2 id="examples"><a href="https://developer.mozilla.org/es/docs/Web/CSS/position#examples" title="Permalink to Examples">Examples</a></h2><div></div><h3 id="relative_positioning"><a href="https://developer.mozilla.org/es/docs/Web/CSS/position#relative_positioning" title="Permalink to Posicionamiento relativo">Posicionamiento relativo</a></h3><div><p>Elementos posicionados relativamente son desplazados una cantidad dada de su posición normal en el documento, pero sin que su desplazamiento afecte a otros elementos. En el ejemplo siguiente, nótese cómo los demás elementos se ubican como si "Two" estuviera ocupando el lugar de su ubicación normal.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>two<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>three<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>four<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Four<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#two</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="200px" id="frame_Relative_positioning" src="./position - CSS _ MDN_files/Relative_positioning.html" width="600px" loading="lazy"></iframe></p></div><h3 id="absolute_positioning"><a href="https://developer.mozilla.org/es/docs/Web/CSS/position#absolute_positioning" title="Permalink to Posicionamiento absoluto">Posicionamiento absoluto</a></h3><div><p>Los elementos posicionados relativamente se mantienen en el flujo normal del documento. Por el contrario, un elemento posicionado absolutamente es removido del flujoñ de esta manera, los demás elementos se posicionan como si el mismo no existiera. El elemento posicionado absolutamente se posiciona relativamente a su<em>ancestro posicionado más cercano</em> (es decir, el ancestro más cercano que no es <code>static</code>). Si no hay ningún ancestro posicionado se ubica relativo al <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> inicial. En el ejemplo siguiente, la caja "Two" no tiene un ancestro posicionado, por lo tanto se posiciona relativo al <code><body></code> del documento.</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html notranslate"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>two<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>three<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>four<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Four<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css notranslate"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#two</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="200px" id="frame_Absolute_positioning" src="./position - CSS _ MDN_files/Absolute_positioning.html" width="800px" loading="lazy"></iframe></p></div><h3 id="fixed_positioning"><a href="https://developer.mozilla.org/es/docs/Web/CSS/position#fixed_positioning" title="Permalink to Posicionamiento fijo">Posicionamiento fijo</a></h3><div><p>El posicionamiento fijo es similar al posicionamiento absoluto, con la excepción de que el bloque contenedor del elemento es el <em>viewport</em>. Esto puede usarse para crear un elemento flotante que se mantiene en la misma posición independientemente del desplazamiento. En el ejemplo siguiente, la caja "One" está fijada a 80 pixels del límite superior de la página y 10 pixels a la izquierda. Aún luego de desplazarse, se mantiene en el mismo lugar relativo al viewport.</p>
<pre class="brush: html notranslate"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>outer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<h4 id="CSS_3">CSS</h4>
<pre class="brush: css notranslate"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#one</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.outer</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> scroll<span class="token punctuation">;</span>
<span class="token property">padding-left</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="300px" id="frame_Fixed_positioning" src="./position - CSS _ MDN_files/Fixed_positioning.html" width="800px" loading="lazy"></iframe></p></div><h3 id="sticky_positioning"><a href="https://developer.mozilla.org/es/docs/Web/CSS/position#sticky_positioning" title="Permalink to Posicionamiento sticky">Posicionamiento sticky</a></h3><div><p>El posicionamiento sticky puede considerarse un híbrido de los posicionamientos relativo y fijo. Un elemento con posicionamiento sticky es tratado como un elemento posicionado relativamente hasta que cruza un umbral especificado, en cuyo punto se trata como fijo hasta que alcanza el límite de su padre. Por ejemplo...</p>
<pre class="brush: css notranslate"><code><span class="token selector">#one</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre>
<p>...posicionaría el elemento con id <em>uno </em>relativamente hasta que el viewport sea desplazado de manera tal que el elemento esté a menos de 10 píxeles del límite superior. Más allá de ese umbral, el elemento sería fijado a 10 píxeles del límite superior.</p>
<p>Un uso común para el posicionamiento sticky es para los encabezados en una lista alfabética. El encabezado "B" aparecerá justo por debajo de los ítems que comienzan con "A" hasta que se hayan desplazado más allá de la pantalla. En vez de deslizarse fuera de la pantalla como el resto del contenido, el encabezado "B" se mantendrá fijado al límite superior del viewport hasta que todos los ítems "B" se hayan desplazado fuera de la pantalla, en cuyo punto será cubierto por el encabezado "C", y así sucesivamente. Se debe especificar un umbral con al menos uno de <code style="">top</code><span style="">, </span><code style="">right</code><span style="">, </span><code style="">bottom</code><span style="">, or </span><code style="">left</code><span style=""> para que el posicionamiento sticky se comporte de forma esperada. Caso contrario, será indistinguible del posicionamiento relativo.</span></p>
<h4 id="HTML_3">HTML</h4>
<pre class="brush: html notranslate"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Andrew W.K.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Apparat<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Arcade Fire<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>At The Drive-In<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Aziz Ansari<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Chromeo<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Common<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Converge<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Crystal Castles<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Cursive<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>E<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Explosions In The Sky<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>T<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Ted Leo <span class="token entity named-entity" title="&">&amp;</span> The Pharmacists<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>T-Pain<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Thrice<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>TV On The Radio<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Two Gallants<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span>
</code></pre>
<h4 id="CSS_4">CSS</h4>
<pre class="brush: css notranslate"><code><span class="token selector">*</span> <span class="token punctuation">{</span>
<span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">dl > div</span> <span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> #FFF<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 24px 0 0 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">dt</span> <span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> #B8C1C8<span class="token punctuation">;</span>
<span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid #989EA4<span class="token punctuation">;</span>
<span class="token property">border-top</span><span class="token punctuation">:</span> 1px solid #717D85<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> #FFF<span class="token punctuation">;</span>
<span class="token property">font</span><span class="token punctuation">:</span> bold 18px/21px Helvetica<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 2px 0 0 12px<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> -webkit-sticky<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> -1px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">dd</span> <span class="token punctuation">{</span>
<span class="token property">font</span><span class="token punctuation">:</span> bold 20px/45px Helvetica<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 0 0 0 12px<span class="token punctuation">;</span>
<span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">dd + dd</span> <span class="token punctuation">{</span>
<span class="token property">border-top</span><span class="token punctuation">:</span> 1px solid #CCC<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="300px" id="frame_Sticky_positioning" src="./position - CSS _ MDN_files/Sticky_positioning.html" width="500px" loading="lazy"></iframe></p>
<ul>
</ul></div><h2 id="consideraciones_de_accesibilidad"><a href="https://developer.mozilla.org/es/docs/Web/CSS/position#consideraciones_de_accesibilidad" title="Permalink to Consideraciones de accesibilidad">Consideraciones de accesibilidad</a></h2><div><p>Asegurarse de que los elementos posicionados con valor <code>absolute</code> o <code>fixed</code> no oscurezcan el resto del contenido cuando la página sea ampliada para aumentar el tamaño del texto.</p>
<ul>
<li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background" class="external">MDN entendiendo el WCAG, explicaciones de los lineamientos 1.4.</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener" class="external">Presentación visual: Entendiendo SC 1.4.8 | Entendiendo WCAG 2.0</a></li>
</ul></div><h3 id="performance_y_accesibilidad"><a href="https://developer.mozilla.org/es/docs/Web/CSS/position#performance_y_accesibilidad" title="Permalink to Performance y accesibilidad">Performance y accesibilidad</a></h3><div><p>Los elementos que se desplazan que contienen contenido <code>fixed</code> o <code>sticky</code> content pueden ocasionar problemas de performance y accesibilidad. Mientras un usuario desplaza la página, el navegador debe realizar repaint del contenido sticky o fijo en una nueva locación. Dependiendo del contenido que precisa ser repainted, la performance del navegador y la velocidad de procesamiento del dispositivo, el navegador podría no ser capaz de realizar el repaint a 60 <abbr title="frames per second">fps</abbr>, ocasionando problemas de accesibilidad para personas con sensibilidades y desprolijidad para todos. Una solución es agregar <a href="https://developer.mozilla.org/es/docs/Web/CSS/will-change" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code>will-change: transform</code></a> a los elementos posicionados para renderizar el elemento en su propia capa, mejorando la velocidad del repaint y por lo tanto mejorando performance y accesibilidad.</p></div><h2 id="specifications"><a href="https://developer.mozilla.org/es/docs/Web/CSS/position#specifications" title="Permalink to Especificaciones">Especificaciones</a></h2><div><table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Status</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="external" href="https://www.w3.org/TR/CSS2/visuren.html#propdef-position" hreflang="en" lang="en">CSS Level 2 (Revision 1)<br><small lang="es">La definición de 'position' en esta especificación.</small></a></td>
<td><span class="spec-REC">Recommendation</span></td>
<td></td>
</tr>
<tr>
<td><a class="external" href="https://drafts.csswg.org/css-position-3/#position-property" hreflang="en" lang="en">CSS Positioned Layout Module Level 3<br><small lang="es">La definición de 'position' en esta especificación.</small></a></td>
<td><span class="spec-WD">Working Draft</span></td>
<td>Añade valor de la propiedad <code>sticky</code>.</td>
</tr>
</tbody>
</table>
<table class="properties"><tbody><tr><th scope="row"><a href="https://developer.mozilla.org/es/docs/Web/CSS/Valor_inicial">Valor inicial</a></th><td><code>static</code></td></tr><tr><th scope="row">Applies to</th><td>all elements</td></tr><tr><th scope="row"><a href="https://developer.mozilla.org/es/docs/Web/CSS/inheritance">Heredable</a></th><td>no</td></tr><tr><th scope="row"><a href="https://developer.mozilla.org/es/docs/Web/CSS/Valor_calculado">Valor calculado</a></th><td>como se especifica</td></tr><tr><th scope="row">Animation type</th><td>discrete</td></tr><tr><th scope="row">Creates <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a></th><td>yes</td></tr></tbody></table></div><h2 id="browser_compatibility"><a href="https://developer.mozilla.org/es/docs/Web/CSS/position#browser_compatibility" title="Permalink to Compatibilidad">Compatibilidad</a></h2><a class="bc-github-link external external-icon" href="https://github.com/mdn/browser-compat-data/issues/new?body=%3C%21--+Tips%3A+where+applicable%2C+specify+browser+name%2C+browser+version%2C+and+mobile+operating+system+version+--%3E%0A%0A%23%23%23%23+What+information+was+incorrect%2C+unhelpful%2C+or+incomplete%3F%0A%0A%23%23%23%23+What+did+you+expect+to+see%3F%0A%0A%23%23%23%23+Did+you+test+this%3F+If+so%2C+how%3F%0A%0A%0A%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EMDN+page+report+details%3C%2Fsummary%3E%0A%0A*+Query%3A+%60css.properties.position%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fes%2Fdocs%2FWeb%2FCSS%2Fposition%0A*+Report+started%3A+2021-01-31T05%3A30%3A15.489Z%0A%0A%3C%2Fdetails%3E&title=css.properties.position+-+%3CPUT+TITLE+HERE%3E" target="_blank" rel="noopener noreferrer" title="Report an issue with this compatibility data">Report problems with this compatibility data on GitHub</a><table class="bc-table bc-table-web"><thead><tr class="bc-platforms"><td></td><th class="bc-platform-desktop" colspan="6"><span>desktop</span></th><th class="bc-platform-mobile" colspan="6"><span>mobile</span></th></tr><tr class="bc-browsers"><td></td><th class="bc-browser-chrome"><span class="bc-head-txt-label bc-head-icon-chrome">Chrome</span></th><th class="bc-browser-edge"><span class="bc-head-txt-label bc-head-icon-edge">Edge</span></th><th class="bc-browser-firefox"><span class="bc-head-txt-label bc-head-icon-firefox">Firefox</span></th><th class="bc-browser-ie"><span class="bc-head-txt-label bc-head-icon-ie">Internet Explorer</span></th><th class="bc-browser-opera"><span class="bc-head-txt-label bc-head-icon-opera">Opera</span></th><th class="bc-browser-safari"><span class="bc-head-txt-label bc-head-icon-safari">Safari</span></th><th class="bc-browser-webview_android"><span class="bc-head-txt-label bc-head-icon-webview_android">WebView Android</span></th><th class="bc-browser-chrome_android"><span class="bc-head-txt-label bc-head-icon-chrome_android">Chrome Android</span></th><th class="bc-browser-firefox_android"><span class="bc-head-txt-label bc-head-icon-firefox_android">Firefox Android</span></th><th class="bc-browser-opera_android"><span class="bc-head-txt-label bc-head-icon-opera_android">Opera Android</span></th><th class="bc-browser-safari_ios"><span class="bc-head-txt-label bc-head-icon-safari_ios">iOS Safari</span></th><th class="bc-browser-samsunginternet_android"><span class="bc-head-txt-label bc-head-icon-samsunginternet_android">Samsung Internet</span></th></tr></thead><tbody><tr><th scope="row"><div class="bc-table-row-header"><code>position</code></div></th><td class="bc-browser-chrome bc-supports-yes " aria-expanded="false" title="Released 2008-12-11"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>1<div class="bc-icons"></div></td><td class="bc-browser-edge bc-supports-yes " aria-expanded="false" title="Released 2015-07-28"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>12<div class="bc-icons"></div></td><td class="bc-browser-firefox bc-supports-yes bc-has-history" aria-expanded="false" tabindex="0" title="Released 2004-11-09"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>1<div class="bc-icons"><abbr class="only-icon" title="footnote"><span>footnote</span><i class="ic-footnote"></i></abbr></div><button type="button" title="Open implementation notes" class="bc-history-link only-icon "><span>Open</span><i class="ic-history" aria-hidden="true"></i></button></td><td class="bc-browser-ie bc-supports-yes " aria-expanded="false" title="Released 1997-09-30"><span class="bc-browser-name">Internet Explorer</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>4<div class="bc-icons"></div></td><td class="bc-browser-opera bc-supports-yes " aria-expanded="false" title="Released 2000-06-28"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>4<div class="bc-icons"></div></td><td class="bc-browser-safari bc-supports-yes " aria-expanded="false" title="Released 2003-06-23"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>1<div class="bc-icons"></div></td><td class="bc-browser-webview_android bc-supports-yes " aria-expanded="false"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr><span title="Supported in version 37 or earlier."><sup>≤ </sup>37</span><div class="bc-icons"></div></td><td class="bc-browser-chrome_android bc-supports-yes " aria-expanded="false" title="Released 2012-06-27"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>18<div class="bc-icons"></div></td><td class="bc-browser-firefox_android bc-supports-yes bc-has-history" aria-expanded="false" tabindex="0" title="Released 2011-03-29"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>4<div class="bc-icons"><abbr class="only-icon" title="footnote"><span>footnote</span><i class="ic-footnote"></i></abbr></div><button type="button" title="Open implementation notes" class="bc-history-link only-icon "><span>Open</span><i class="ic-history" aria-hidden="true"></i></button></td><td class="bc-browser-opera_android bc-supports-yes " aria-expanded="false" title="Released 2013-05-21"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>14<div class="bc-icons"></div></td><td class="bc-browser-safari_ios bc-supports-yes " aria-expanded="false" title="Released 2007-06-29"><span class="bc-browser-name">iOS Safari</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>1<div class="bc-icons"></div></td><td class="bc-browser-samsunginternet_android bc-supports-yes " aria-expanded="false" title="Released 2013-04-27"><span class="bc-browser-name">Samsung Internet</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>1.0<div class="bc-icons"></div></td></tr><tr><th scope="row"><div class="bc-table-row-header"><span>Absolutely-positioned flex children</span></div></th><td class="bc-browser-chrome bc-supports-yes " aria-expanded="false" title="Released 2016-07-20"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>52<div class="bc-icons"></div></td><td class="bc-browser-edge bc-supports-yes " aria-expanded="false" title="Released 2015-07-28"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>12<div class="bc-icons"></div></td><td class="bc-browser-firefox bc-supports-yes " aria-expanded="false" title="Released 2017-03-07"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>52<div class="bc-icons"></div></td><td class="bc-browser-ie bc-supports-yes " aria-expanded="false" title="Released 2012-10-26"><span class="bc-browser-name">Internet Explorer</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>10<div class="bc-icons"></div></td><td class="bc-browser-opera bc-supports-yes " aria-expanded="false" title="Released 2016-08-02"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>39<div class="bc-icons"></div></td><td class="bc-browser-safari bc-supports-yes " aria-expanded="false" title="Released 2017-09-19"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>11<div class="bc-icons"></div></td><td class="bc-browser-webview_android bc-supports-yes " aria-expanded="false" title="Released 2016-07-27"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>52<div class="bc-icons"></div></td><td class="bc-browser-chrome_android bc-supports-yes " aria-expanded="false" title="Released 2016-07-27"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>52<div class="bc-icons"></div></td><td class="bc-browser-firefox_android bc-supports-yes " aria-expanded="false" title="Released 2017-03-07"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>52<div class="bc-icons"></div></td><td class="bc-browser-opera_android bc-supports-yes " aria-expanded="false" title="Released 2016-10-25"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>41<div class="bc-icons"></div></td><td class="bc-browser-safari_ios bc-supports-yes " aria-expanded="false" title="Released 2017-09-19"><span class="bc-browser-name">iOS Safari</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>11<div class="bc-icons"></div></td><td class="bc-browser-samsunginternet_android bc-supports-yes " aria-expanded="false" title="Released 2017-08-23"><span class="bc-browser-name">Samsung Internet</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>6.0<div class="bc-icons"></div></td></tr><tr><th scope="row"><div class="bc-table-row-header"><span><code>fixed</code></span></div></th><td class="bc-browser-chrome bc-supports-yes " aria-expanded="false" title="Released 2008-12-11"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>1<div class="bc-icons"></div></td><td class="bc-browser-edge bc-supports-yes " aria-expanded="false" title="Released 2015-07-28"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>12<div class="bc-icons"></div></td><td class="bc-browser-firefox bc-supports-yes bc-has-history" aria-expanded="false" tabindex="0" title="Released 2004-11-09"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>1<div class="bc-icons"><abbr class="only-icon" title="footnote"><span>footnote</span><i class="ic-footnote"></i></abbr></div><button type="button" title="Open implementation notes" class="bc-history-link only-icon "><span>Open</span><i class="ic-history" aria-hidden="true"></i></button></td><td class="bc-browser-ie bc-supports-yes bc-has-history" aria-expanded="false" tabindex="0" title="Released 2006-10-18"><span class="bc-browser-name">Internet Explorer</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>7<div class="bc-icons"><abbr class="only-icon" title="footnote"><span>footnote</span><i class="ic-footnote"></i></abbr></div><button type="button" title="Open implementation notes" class="bc-history-link only-icon "><span>Open</span><i class="ic-history" aria-hidden="true"></i></button></td><td class="bc-browser-opera bc-supports-yes " aria-expanded="false" title="Released 2000-06-28"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>4<div class="bc-icons"></div></td><td class="bc-browser-safari bc-supports-yes " aria-expanded="false" title="Released 2003-06-23"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>1<div class="bc-icons"></div></td><td class="bc-browser-webview_android bc-supports-yes " aria-expanded="false"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr><span title="Supported in version 37 or earlier."><sup>≤ </sup>37</span><div class="bc-icons"></div></td><td class="bc-browser-chrome_android bc-supports-yes " aria-expanded="false" title="Released 2012-06-27"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>18<div class="bc-icons"></div></td><td class="bc-browser-firefox_android bc-supports-yes bc-has-history" aria-expanded="false" tabindex="0" title="Released 2011-03-29"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>4<div class="bc-icons"><abbr class="only-icon" title="footnote"><span>footnote</span><i class="ic-footnote"></i></abbr></div><button type="button" title="Open implementation notes" class="bc-history-link only-icon "><span>Open</span><i class="ic-history" aria-hidden="true"></i></button></td><td class="bc-browser-opera_android bc-supports-yes " aria-expanded="false" title="Released 2013-05-21"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>14<div class="bc-icons"></div></td><td class="bc-browser-safari_ios bc-supports-yes " aria-expanded="false" title="Released 2007-06-29"><span class="bc-browser-name">iOS Safari</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>1<div class="bc-icons"></div></td><td class="bc-browser-samsunginternet_android bc-supports-yes " aria-expanded="false" title="Released 2013-04-27"><span class="bc-browser-name">Samsung Internet</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>1.0<div class="bc-icons"></div></td></tr><tr><th scope="row"><div class="bc-table-row-header"><span>Table elements as <code>sticky</code> positioning containers</span></div></th><td class="bc-browser-chrome bc-supports-yes " aria-expanded="false" title="Released 2017-01-25"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>56<div class="bc-icons"></div></td><td class="bc-browser-edge bc-supports-yes " aria-expanded="false" title="Released 2017-10-17"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>16<div class="bc-icons"></div></td><td class="bc-browser-firefox bc-supports-yes " aria-expanded="false" title="Released 2018-03-13"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>59<div class="bc-icons"></div></td><td class="bc-browser-ie bc-supports-no " aria-expanded="false"><span class="bc-browser-name">Internet Explorer</span><abbr class="bc-level-no only-icon" title="No support"><span>No support</span></abbr>No<div class="bc-icons"></div></td><td class="bc-browser-opera bc-supports-yes " aria-expanded="false" title="Released 2017-02-07"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>43<div class="bc-icons"></div></td><td class="bc-browser-safari bc-supports-yes " aria-expanded="false" title="Released 2014-10-16"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>8<div class="bc-icons"></div></td><td class="bc-browser-webview_android bc-supports-yes " aria-expanded="false" title="Released 2017-02-01"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>56<div class="bc-icons"></div></td><td class="bc-browser-chrome_android bc-supports-yes " aria-expanded="false" title="Released 2017-02-01"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>56<div class="bc-icons"></div></td><td class="bc-browser-firefox_android bc-supports-yes " aria-expanded="false" title="Released 2018-03-13"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>59<div class="bc-icons"></div></td><td class="bc-browser-opera_android bc-supports-yes " aria-expanded="false" title="Released 2017-09-27"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>43<div class="bc-icons"></div></td><td class="bc-browser-safari_ios bc-supports-yes " aria-expanded="false" title="Released 2014-09-17"><span class="bc-browser-name">iOS Safari</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>8<div class="bc-icons"></div></td><td class="bc-browser-samsunginternet_android bc-supports-yes " aria-expanded="false" title="Released 2017-08-23"><span class="bc-browser-name">Samsung Internet</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>6.0<div class="bc-icons"></div></td></tr><tr><th scope="row"><div class="bc-table-row-header"><span><code>sticky</code></span></div></th><td class="bc-browser-chrome bc-supports-yes " aria-expanded="false" title="Released 2017-01-25"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>56<div class="bc-icons"></div></td><td class="bc-browser-edge bc-supports-yes " aria-expanded="false" title="Released 2017-10-17"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>16<div class="bc-icons"></div></td><td class="bc-browser-firefox bc-supports-yes bc-has-history" aria-expanded="false" tabindex="0"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>32<div class="bc-icons"></div><button type="button" title="Open implementation notes" class="bc-history-link only-icon "><span>Open</span><i class="ic-history" aria-hidden="true"></i></button></td><td class="bc-browser-ie bc-supports-no " aria-expanded="false"><span class="bc-browser-name">Internet Explorer</span><abbr class="bc-level-no only-icon" title="No support"><span>No support</span></abbr>No<div class="bc-icons"></div></td><td class="bc-browser-opera bc-supports-yes " aria-expanded="false" title="Released 2017-02-07"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>43<div class="bc-icons"></div></td><td class="bc-browser-safari bc-supports-yes bc-has-history" aria-expanded="false" tabindex="0"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>13<div class="bc-icons"></div><button type="button" title="Open implementation notes" class="bc-history-link only-icon "><span>Open</span><i class="ic-history" aria-hidden="true"></i></button></td><td class="bc-browser-webview_android bc-supports-yes " aria-expanded="false" title="Released 2017-02-01"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>56<div class="bc-icons"></div></td><td class="bc-browser-chrome_android bc-supports-yes " aria-expanded="false" title="Released 2017-02-01"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>56<div class="bc-icons"></div></td><td class="bc-browser-firefox_android bc-supports-yes bc-has-history" aria-expanded="false" tabindex="0"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>32<div class="bc-icons"></div><button type="button" title="Open implementation notes" class="bc-history-link only-icon "><span>Open</span><i class="ic-history" aria-hidden="true"></i></button></td><td class="bc-browser-opera_android bc-supports-yes " aria-expanded="false" title="Released 2017-09-27"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>43<div class="bc-icons"></div></td><td class="bc-browser-safari_ios bc-supports-yes bc-has-history" aria-expanded="false" tabindex="0"><span class="bc-browser-name">iOS Safari</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>13<div class="bc-icons"></div><button type="button" title="Open implementation notes" class="bc-history-link only-icon "><span>Open</span><i class="ic-history" aria-hidden="true"></i></button></td><td class="bc-browser-samsunginternet_android bc-supports-yes " aria-expanded="false" title="Released 2017-08-23"><span class="bc-browser-name">Samsung Internet</span><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr>6.0<div class="bc-icons"></div></td></tr></tbody></table><section class="bc-legend"><h3 class="visually-hidden" id="Legend">Legend</h3><dl class="bc-legend-items-container"><div class="bc-legend-item"><dt><span class="bc-supports-yes bc-supports"><abbr class="bc-level bc-level-yes only-icon" title="Full support"><span>Full support</span></abbr></span></dt><dd>Full support</dd></div><div class="bc-legend-item"><dt><span class="bc-supports-no bc-supports"><abbr class="bc-level bc-level-no only-icon" title="No support"><span>No support</span></abbr></span></dt><dd>No support</dd></div><div class="bc-legend-item"><dt><abbr class="only-icon legend-icons ic-footnote" title="See implementation notes."></abbr></dt><dd>See implementation notes.</dd></div><div class="bc-legend-item"><dt><abbr class="only-icon legend-icons ic-disabled" title="User must explicitly enable this feature."></abbr></dt><dd>User must explicitly enable this feature.</dd></div><div class="bc-legend-item"><dt><abbr class="only-icon legend-icons ic-prefix" title="Requires a vendor prefix or different name for use."></abbr></dt><dd>Requires a vendor prefix or different name for use.</dd></div></dl></section><div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div><div><div class="hidden">La tabla de compatibilidad en esta página es generada por una data estructurada. Si deseas contribuir a la data, por favor entra a <a href="https://github.com/mdn/browser-compat-data" rel="noopener" class="external">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</div></div></article></main><nav id="sidebar-quicklinks" class="sidebar"><h4>Related Topics</h4><div><ol><li><strong><a href="https://developer.mozilla.org/es/docs/Web/CSS">CSS</a></strong></li><li><strong><a href="https://developer.mozilla.org/es/docs/Web/CSS/Reference">Referencia CSS</a></strong></li><li><strong><a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning">CSS Positioning</a></strong></li><li class="toggle"><details open=""><summary>Guías</summary><ol><li><a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index">Entendiendo la propiedad CSS z-index</a></li></ol></details></li><li class="toggle"><details open=""><summary>Propiedades</summary><ol><li><a href="https://developer.mozilla.org/es/docs/Web/CSS/bottom"><code>bottom</code></a></li><li><a href="https://developer.mozilla.org/es/docs/Web/CSS/clear"><code>Clear</code></a></li><li><a href="https://developer.mozilla.org/es/docs/Web/CSS/float"><code>float</code></a></li><li><a href="https://developer.mozilla.org/es/docs/Web/CSS/left"><code>left</code></a></li><li><em><code>position</code></em></li><li><a href="https://developer.mozilla.org/es/docs/Web/CSS/right"><code>right</code></a></li><li><a href="https://developer.mozilla.org/es/docs/Web/CSS/top"><code>Top</code></a></li><li><a href="https://developer.mozilla.org/es/docs/Web/CSS/z-index"><code>z-index</code></a></li></ol></details></li></ol></div></nav></div><aside class="metadata"><div class="metadata-content-container"><p class="last-modified-date"><b>Last modified:</b> <time datetime="2020-10-15T21:15:59.180Z">15 oct 2020</time>, <a href="https://developer.mozilla.org/es/docs/Web/CSS/position/contributors.txt">by MDN contributors</a></p></div></aside><footer id="nav-footer" class="page-footer"><div class="content-container"><div class="page-footer-logo"><a href="https://developer.mozilla.org/es/" class="logo" aria-label="MDN Web Docs"><svg viewBox="0 0 451.74 135" role="img" fill="#fff"><g id="Layer_2" data-name="Layer 2"><path class="cls-1" d="M7.14,8.35V119.41H118.19V8.35Zm103.71,56c-.48.92-1,1.79-1.46,2.71a3.44,3.44,0,0,1-3.54,2,2.4,2.4,0,0,0-1.55.5c-1.37.9-2.76,1.79-4.18,2.63a7.33,7.33,0,0,1-6.35.34,29.71,29.71,0,0,0-10.63-2,11.7,11.7,0,0,0-9.46,4.31,14.84,14.84,0,0,0-2.13,4.29c-1.24,3.07-2.3,21.38-2.3,26.05,0,0-17.62-3.42-34.15-20.34l4.31-11.32H25.91l9.76-10.35H18.87l9.77-10.34H12.69L30.45,34A40.9,40.9,0,0,1,50.22,23.17c7.1-1.22,8.93-.53,13.31.77l2.43.73.85.25,3.1.95a12.56,12.56,0,0,0,6.21.09,11.37,11.37,0,0,1,8.25,1,8.24,8.24,0,0,1,4.1,6.22,7.29,7.29,0,0,0,3.61,5.49,59.45,59.45,0,0,0,9.32,4.11c2.27.86,4.54,1.84,6.79,2.72a6.81,6.81,0,0,1,2.86,2.06,4.81,4.81,0,0,1,1.1,2.73c.14,2,.37,4,.47,6h0A15.24,15.24,0,0,1,110.85,64.32Z"></path><path class="cls-1" d="M320.12,39.62a5.42,5.42,0,0,0-4.53,2.13,7.36,7.36,0,0,0-1.7,4.43v2.36a6.28,6.28,0,0,0,1.7,4.46,5.63,5.63,0,0,0,4.3,1.82,5.12,5.12,0,0,0,4.57-2.27A9.7,9.7,0,0,0,326,47a8.11,8.11,0,0,0-1.67-5.52A5.36,5.36,0,0,0,320.12,39.62Z"></path><path class="cls-1" d="M387.38,39.53a5.52,5.52,0,0,0-4.7,2.15,8.8,8.8,0,0,0-1.63,5.49,9.23,9.23,0,0,0,1.58,5.45,5.38,5.38,0,0,0,4.7,2.25,5.61,5.61,0,0,0,4.74-2.2,8.91,8.91,0,0,0,1.68-5.59A8.24,8.24,0,0,0,392,41.56,5.76,5.76,0,0,0,387.38,39.53Z"></path><path class="cls-1" d="M299.47,41.35a4.34,4.34,0,0,0-4-1.92,4.55,4.55,0,0,0-3.89,1.73A8.37,8.37,0,0,0,290,45.33h10.48A6.3,6.3,0,0,0,299.47,41.35Z"></path><path class="cls-1" d="M357.74,30.75H352V54.06h5.72q5.47,0,8.35-3T369,42.41q0-5.43-2.88-8.55T357.74,30.75Z"></path><path class="cls-1" d="M121.55,8.35v70.8h323V8.35ZM163.76,30.8h-4V54h3.68v3.73H152.19V54h3.31V36.79h-.19l-9.63,19.12h-2.12l-10-19.4h-.19V54h3.45v3.73H125.67V54h3.68V30.8h-4V27.07H133l11.66,22.56h.19l11.18-22.56h7.7Zm29.12,22.67q-4.11,4.28-11.38,4.28H167.44V54.06h3.73V30.75h-3.73V27.07h13.83q7.59,0,11.66,4.29a15.4,15.4,0,0,1,4,11A15.33,15.33,0,0,1,192.88,53.47ZM231.77,30.8h-3.68v27h-2.6L208.08,35h-.19V54h4.67v3.73H200.34V54h3.49V30.8h-4V27.07h7.08l16.9,22.09H224V30.8h-4.58V27.07h12.32Zm43.8,27h-3.31l-7.83-23.18h-.19l-7.55,23.18h-3.35L244.56,30.8h-2.65V27.07H253V30.8h-3.87L255,50.71h.23l6.61-19.91H259V27.07h11V30.8h-2.78l6.61,20.1h.23l5.43-20.1h-4.15V27.07h11V30.8h-2.54Zm26.71-1.51a9.66,9.66,0,0,1-6.42,2,10.2,10.2,0,0,1-7.41-2.74c-1.89-1.82-2.83-4.47-2.83-7.93a12.37,12.37,0,0,1,2.64-8.12,9,9,0,0,1,7.32-3.21,8.62,8.62,0,0,1,6.75,2.69,9.65,9.65,0,0,1,2.45,6.52,13.67,13.67,0,0,1-.28,2.69H290q.29,6.71,6.18,6.7a5.2,5.2,0,0,0,3.71-1.18,5.82,5.82,0,0,0,1.67-2.83l3.45.71A7.21,7.21,0,0,1,302.28,56.24Zm25.77-1.63c-1.51,2.4-3.92,3.61-7.22,3.61s-5.84-1.29-7.22-3.87c0,.25-.1.82-.21,1.7s-.19,1.44-.22,1.7H309c.16-1,.31-2,.47-3.07a21.42,21.42,0,0,0,.24-3.16v-23h-3.4V25.27h7.55V40.9a9.76,9.76,0,0,1,2.67-3.28,7.33,7.33,0,0,1,4.74-1.4A8.48,8.48,0,0,1,327.77,39q2.55,2.74,2.55,7.74A14.6,14.6,0,0,1,328.05,54.61Zm41.39-1.14q-4.11,4.28-11.37,4.28H344V54.06h3.73V30.75H344V27.07h13.83q7.59,0,11.66,4.29a15.41,15.41,0,0,1,4.06,11A15.34,15.34,0,0,1,369.44,53.47Zm25.65,1.68a10.53,10.53,0,0,1-7.9,3.07,10,10,0,0,1-7.63-3,10.93,10.93,0,0,1-2.8-7.83,12.13,12.13,0,0,1,2.69-7.93q2.69-3.3,8-3.3t8,3.28a12,12,0,0,1,2.64,7.76A10.86,10.86,0,0,1,395.09,55.15Zm22.61.57c-1.4,1.66-3.63,2.5-6.68,2.5a9.58,9.58,0,0,1-7.15-2.76q-2.72-2.76-2.71-7.91a12.25,12.25,0,0,1,2.69-8,9.17,9.17,0,0,1,7.5-3.28,15,15,0,0,1,3.82.48,10.37,10.37,0,0,1,3.5,1.65l.85,5.47-3.35.38-.76-3.54a8.07,8.07,0,0,0-4.11-1,4.9,4.9,0,0,0-4.39,2.15,9.93,9.93,0,0,0-1.41,5.55A8.9,8.9,0,0,0,407,52.84a5.23,5.23,0,0,0,4.44,2c2.92,0,4.67-1.7,5.23-5.1l3.5.71A10.34,10.34,0,0,1,417.7,55.72Zm20.48.75a11.68,11.68,0,0,1-6.63,1.75,15.52,15.52,0,0,1-8.26-2.08L424,51l3.26.33-.1,2.74a7,7,0,0,0,2.06.66,12.63,12.63,0,0,0,2.19.19,8.68,8.68,0,0,0,3.66-.75,2.5,2.5,0,0,0,1.63-2.36,2.25,2.25,0,0,0-1.32-2.2,12.65,12.65,0,0,0-3.28-1c-1.31-.22-2.61-.49-3.9-.82a7.5,7.5,0,0,1-3.25-1.7,4.67,4.67,0,0,1-1.33-3.66c0-2.36.88-4,2.62-4.91a12,12,0,0,1,5.6-1.37,15,15,0,0,1,4.08.55,16.65,16.65,0,0,1,3.47,1.39l.47,5.1-3.3.37-.48-3.3a9.5,9.5,0,0,0-4.06-.9,5.62,5.62,0,0,0-2.87.66A2.33,2.33,0,0,0,428,42.27a2.13,2.13,0,0,0,1.3,2.07,11.91,11.91,0,0,0,3.21.92,36.69,36.69,0,0,1,3.82.83,7.46,7.46,0,0,1,3.21,1.74,4.9,4.9,0,0,1,1.3,3.73A5.56,5.56,0,0,1,438.18,56.47Z"></path><path class="cls-1" d="M181.17,30.75h-5.71V54.06h5.71q5.47,0,8.36-3t2.88-8.61q0-5.43-2.88-8.55T181.17,30.75Z"></path><path class="cls-1" d="M121.63,119.32V81.74H236.54v37.58ZM153.22,109h-2v-6.85a4.8,4.8,0,0,0-1.58-4,5.57,5.57,0,0,0-3.55-1.26,5,5,0,0,0-4.92,3.26,4.19,4.19,0,0,0-1.88-2.46,5.82,5.82,0,0,0-3-.8,4.89,4.89,0,0,0-4.56,2.56V97.24h-6.28v3.26h2V109h-2v3.23h9.11V109H131.7v-5.25a4.4,4.4,0,0,1,.69-2.56,2.47,2.47,0,0,1,2.21-1q2.57,0,2.56,3.63v8.41h6.29V109h-2v-5.25a4.47,4.47,0,0,1,.67-2.56,2.42,2.42,0,0,1,2.19-1q2.63,0,2.63,3.63v8.41h6.28Zm9.88-12.07q-4,0-6,2.36a8.41,8.41,0,0,0-2,5.66,7.25,7.25,0,0,0,2.17,5.62,8,8,0,0,0,5.65,2,8.54,8.54,0,0,0,5.94-2.11,7.27,7.27,0,0,0,2.34-5.67,8.21,8.21,0,0,0-2-5.51Q167.13,96.94,163.1,96.94ZM163,109.28a3,3,0,0,1-2.63-1.33,5.68,5.68,0,0,1-.9-3.26,5,5,0,0,1,1-3.28,3.23,3.23,0,0,1,2.61-1.18,3.5,3.5,0,0,1,2.59,1.08,4.56,4.56,0,0,1,1.07,3.31,5.21,5.21,0,0,1-1,3.41A3.33,3.33,0,0,1,163,109.28Zm25-2.3-3.39-.29-.7,2.32H179l8.32-9.54L187,97.24H173.81l-.53,5.25,3.16.34.67-2.36h4.65L173.51,110l.44,2.26h13.13Zm7.62-9.74h-4.46v5.39h4.46Zm0,9.61h-4.46v5.39h4.46Zm13.54-17.49h-4.23l-6.48,22.88h4.22Zm8.68,0h-4.23l-6.45,22.88h4.19Zm15,22.51-.07-2.26a1.22,1.22,0,0,1-.56.1c-.69,0-1-.39-1-1.16v-6.49a4.39,4.39,0,0,0-1.8-3.84,7,7,0,0,0-4.16-1.28,14.55,14.55,0,0,0-3.16.3,24.14,24.14,0,0,0-3.29,1.06l-.56,3.46,3.39.4.5-1.69a2.78,2.78,0,0,1,1.08-.37,11.3,11.3,0,0,1,1.25-.07c1.19,0,1.89.37,2.09,1.1a8.55,8.55,0,0,1,.3,2.26v.5a8.91,8.91,0,0,0-1.18-.11c-.41,0-.81,0-1.21,0a12.64,12.64,0,0,0-4.81.88,3.53,3.53,0,0,0-2.18,3.64,3.66,3.66,0,0,0,1.48,3.33,5.63,5.63,0,0,0,3.11,1,4.67,4.67,0,0,0,3-.91,6.78,6.78,0,0,0,1.8-2,3,3,0,0,0,3.33,3A5.54,5.54,0,0,0,232.85,111.87Zm-9.25-2.32a1.69,1.69,0,0,1-1.36-.52,1.81,1.81,0,0,1-.43-1.21,1.67,1.67,0,0,1,.86-1.68,4.63,4.63,0,0,1,2-.42,7.69,7.69,0,0,1,1.07.07l1.06.13a3.58,3.58,0,0,1-1.08,2.74A3.24,3.24,0,0,1,223.6,109.55Z"></path></g></svg></a></div><ul class="link-list-mdn"><li><a href="https://developer.mozilla.org/es/docs/Web">Web Technologies</a></li><li><a href="https://developer.mozilla.org/es/docs/Learn">Learn Web Development</a></li><li><a href="https://developer.mozilla.org/es/docs/MDN/About">About MDN</a></li><li><a href="https://developer.mozilla.org/es/docs/MDN/Feedback">Feedback</a></li></ul><ul class="link-list-moz"><li><a href="https://www.mozilla.org/about/" target="_blank" rel="noopener noreferrer">About</a></li><li><a href="https://shop.spreadshirt.com/mdn-store/" target="_blank" rel="noopener noreferrer">MDN Web Docs Store</a></li><li><a href="https://www.mozilla.org/contact/" target="_blank" rel="noopener noreferrer">Contact Us</a></li><li><a href="https://www.mozilla.org/firefox/?utm_source=developer.mozilla.org&utm_campaign=footer&utm_medium=referral" target="_blank" rel="noopener noreferrer">Firefox</a></li></ul><div class="social social-mdn"><h4>MDN</h4><ul><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer" aria-label="Twitter"><svg class="icon" viewBox="0 0 100 100" aria-hidden="true" role="img"><path d="M97.5 20.59a42 42 0 01-9.76 10.06c.06.85.06 1.69.06 2.53 0 25.74-19.59 55.4-55.4 55.4a55 55 0 01-29.9-8.74 40.41 40.41 0 004.7.24 39 39 0 0024.18-8.32 19.5 19.5 0 01-18.21-13.5 24.69 24.69 0 003.68.3A20.65 20.65 0 0022 57.9 19.48 19.48 0 016.36 38.79v-.24a19.69 19.69 0 008.8 2.45 19.5 19.5 0 01-6-26 55.33 55.33 0 0040.12 20.35 21.6 21.6 0 01-.48-4.46 19.45 19.45 0 0119.45-19.47 19.4 19.4 0 0114.22 6.15 38.42 38.42 0 0012.36-4.7 19.44 19.44 0 01-8.54 10.73 38.89 38.89 0 0011.21-3z" fill="currentColor"></path></svg></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer" aria-label="Github"><svg viewBox="0 0 100 100" aria-hidden="true" role="img"><path clip-rule="evenodd" d="M50 5.7C24.9 5.7 4.5 26 4.6 51.2c0 19.6 12.5 36.9 31.1 43.1 2.3.4 3.1-1 3.1-2.2s0-3.9-.1-7.7c-12.6 2.7-15.3-6.1-15.3-6.1-2.1-5.3-5-6.7-5-6.7-4.1-2.9.3-2.8.3-2.8 4.6.3 7 4.7 7 4.7 4.1 6.9 10.6 4.9 13.2 3.8.2-2.3 1.2-4.5 2.9-6.1-10.2-1.1-20.8-5-20.8-22.5-.1-4.5 1.6-8.9 4.7-12.2-.5-1.1-2-5.7.4-12 0 0 3.8-1.2 12.5 4.7 7.4-2 15.3-2 22.8 0 8.7-5.9 12.4-4.7 12.4-4.7 2.5 6.3 1 10.9.5 12 3.1 3.3 4.8 7.7 4.7 12.2 0 17.5-10.6 21.4-20.8 22.4 1.6 1.4 3.1 4.2 3.1 8.4 0 6.1-.1 11-.1 12.4 0 1.2.8 2.6 3.1 2.2 23.8-8 36.6-33.8 28.6-57.6C86.8 18.2 69.5 5.7 50 5.7z" fill="currentColor" fill-rule="evenodd"></path></svg></a></li></ul></div><div class="social social-moz"><h4>Mozilla</h4><ul><li><a href="https://twitter.com/mozilla" target="_blank" rel="noopener noreferrer" aria-label="Twitter"><svg class="icon" viewBox="0 0 100 100" aria-hidden="true" role="img"><path d="M97.5 20.59a42 42 0 01-9.76 10.06c.06.85.06 1.69.06 2.53 0 25.74-19.59 55.4-55.4 55.4a55 55 0 01-29.9-8.74 40.41 40.41 0 004.7.24 39 39 0 0024.18-8.32 19.5 19.5 0 01-18.21-13.5 24.69 24.69 0 003.68.3A20.65 20.65 0 0022 57.9 19.48 19.48 0 016.36 38.79v-.24a19.69 19.69 0 008.8 2.45 19.5 19.5 0 01-6-26 55.33 55.33 0 0040.12 20.35 21.6 21.6 0 01-.48-4.46 19.45 19.45 0 0119.45-19.47 19.4 19.4 0 0114.22 6.15 38.42 38.42 0 0012.36-4.7 19.44 19.44 0 01-8.54 10.73 38.89 38.89 0 0011.21-3z" fill="currentColor"></path></svg></a></li><li><a href="https://www.instagram.com/mozillagram/" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><svg class="icon" viewBox="0 0 100 100" aria-hidden="true" role="img"><path d="M65 50a15 15 0 10-15 15 15 15 0 0015-15zm8.08 0A23.09 23.09 0 1150 26.92 23.05 23.05 0 0173.08 50zm6.33-24A5.39 5.39 0 1174 20.59 5.37 5.37 0 0179.41 26zM50 13.09c-6.57 0-20.63-.53-26.55 1.81a14.38 14.38 0 00-5.15 3.4 14.38 14.38 0 00-3.4 5.15c-2.34 5.92-1.81 20-1.81 26.55s-.53 20.62 1.81 26.54a15.39 15.39 0 008.55 8.55c5.92 2.35 20 1.82 26.55 1.82s20.62.53 26.54-1.82a15.39 15.39 0 008.55-8.55c2.35-5.92 1.82-20 1.82-26.54s.53-20.63-1.82-26.55a15.39 15.39 0 00-8.55-8.55c-5.92-2.34-19.98-1.81-26.54-1.81zM95 50c0 6.21.06 12.36-.3 18.57-.35 7.21-2 13.6-7.26 18.87s-11.66 6.91-18.87 7.26c-6.21.36-12.36.3-18.57.3s-12.36.06-18.57-.3c-7.21-.35-13.6-2-18.87-7.26S5.65 75.78 5.3 68.57C4.94 62.36 5 56.21 5 50s-.06-12.36.3-18.57c.35-7.21 2-13.6 7.26-18.87S24.22 5.65 31.43 5.3C37.64 4.94 43.79 5 50 5s12.36-.06 18.57.3c7.21.35 13.6 2 18.87 7.26s6.91 11.66 7.26 18.87c.36 6.21.3 12.36.3 18.57z" fill="currentColor"></path></svg></a></li></ul></div><p id="license" class="footer-license">© 2005-2021 Mozilla and individual contributors. Content is available under <a href="https://developer.mozilla.org/docs/MDN/About#Copyrights_and_licenses">these licenses</a>.</p><ul class="footer-legal"><li><a href="https://www.mozilla.org/about/legal/terms/mozilla" target="_blank" rel="noopener noreferrer">Terms</a></li><li><a href="https://www.mozilla.org/privacy/websites/" target="_blank" rel="noopener noreferrer">Privacy</a></li><li><a href="https://www.mozilla.org/privacy/websites/#cookies" target="_blank" rel="noopener noreferrer">Cookies</a></li></ul></div></footer></div><div class="page-overlay hidden"></div></div><script>window.__data__ = JSON.parse("{\"isArchive\":true,\"isTranslated\":true,\"flaws\":{},\"title\":\"position\",\"mdn_url\":\"/es/docs/Web/CSS/position\",\"locale\":\"es\",\"sidebarHTML\":\"<ol><li><strong><a href=\\\"/es/docs/Web/CSS\\\">CSS</a></strong></li><li><strong><a href=\\\"/es/docs/Web/CSS/Reference\\\">Referencia CSS</a></strong></li><li><strong><a href=\\\"/es/docs/Web/CSS/CSS_Positioning\\\">CSS Positioning</a></strong></li><li class=\\\"toggle\\\"><details open=\\\"\\\"><summary>Gu\u00EDas</summary><ol><li><a href=\\\"/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index\\\">Entendiendo la propiedad CSS z-index</a></li></ol></details></li><li class=\\\"toggle\\\"><details open=\\\"\\\"><summary>Propiedades</summary><ol><li><a href=\\\"/es/docs/Web/CSS/bottom\\\"><code>bottom</code></a></li><li><a href=\\\"/es/docs/Web/CSS/clear\\\"><code>Clear</code></a></li><li><a href=\\\"/es/docs/Web/CSS/float\\\"><code>float</code></a></li><li><a href=\\\"/es/docs/Web/CSS/left\\\"><code>left</code></a></li><li><em><code>position</code></em></li><li><a href=\\\"/es/docs/Web/CSS/right\\\"><code>right</code></a></li><li><a href=\\\"/es/docs/Web/CSS/top\\\"><code>Top</code></a></li><li><a href=\\\"/es/docs/Web/CSS/z-index\\\"><code>z-index</code></a></li></ol></details></li></ol>\",\"body\":[{\"type\":\"prose\",\"value\":{\"id\":null,\"title\":null,\"isH3\":false,\"content\":\"<div></div>\\n\\n<p>La propiedad <strong><code>position</code></strong> de <a href=\\\"/en-US/docs/CSS\\\" title=\\\"CSS\\\">CSS</a> especifica c\u00F3mo un elemento es posicionado en el documento. Las propiedades <a href=\\\"/es/docs/Web/CSS/top\\\" title=\\\"La propiedad top especifica parte de la posici\u00F3n de un elemento posicionado. No tiene efecto en elementos no posicionados.\\\"><code>top</code></a>, <a href=\\\"/es/docs/Web/CSS/right\\\" title=\\\"La propiedad right especifica parte de la posici\u00F3n de un elemento (posicionado - es decir, con una posici\u00F3n determinada por c\u00F3digo).\\\"><code>right</code></a>, <a href=\\\"/es/docs/Web/CSS/bottom\\\" title=\\\"La documentaci\u00F3n acerca de este tema no ha sido escrita todav\u00EDa . \u00A1Por favor considera contribuir !\\\"><code>bottom</code></a>, y <a href=\\\"/es/docs/Web/CSS/left\\\" title=\\\"La propiedad left especifica parte de la posici\u00F3n de un elemento (posicionado - es decir, con una posici\u00F3n determinada por c\u00F3digo).\\\"><code>left</code></a> determinan la ubicaci\u00F3n final de los elementos posicionados.</p>\\n\\n<div><iframe class=\\\"interactive\\\" frameborder=\\\"0\\\" height=\\\"250\\\" src=\\\"https://interactive-examples.mdn.mozilla.net/pages/css/position.html\\\" title=\\\"MDN Web Docs Interactive Example\\\" width=\\\"100%\\\" loading=\\\"lazy\\\"></iframe></div>\\n\\n<p class=\\\"hidden\\\">El c\u00F3digo fuente de este ejemplo interactivo se encuentra almacenado en un repositorio de GitHub. Si quisiera contribuir al proyecto de ejemplos interactivos, por favor clone <a href=\\\"https://github.com/mdn/interactive-examples\\\" class=\\\"external\\\">https://github.com/mdn/interactive-examples</a> y env\u00EDenos sus contribuciones como un pull request.</p>\"}},{\"type\":\"prose\",\"value\":{\"id\":\"Tipos_de_posicionamiento\",\"title\":\"Tipos de posicionamiento\",\"isH3\":true,\"content\":\"<ul>\\n <li>Un <strong>elemento posicionado </strong>es un elemento cuyo valor <a href=\\\"/en-US/docs/CSS/computed_value\\\">computado</a> de <code>position</code> es <code>relative</code>, <code>absolute</code>, <code>fixed</code>, o <code>sticky</code>. (En otras palabras, cualquiera excepto <code>static</code>).</li>\\n <li>Un <strong>elemento posicionado relativamente</strong> es un elemento cuyo valor <a href=\\\"/en-US/docs/CSS/computed_value\\\">computado</a> de <code>position</code> es <code>relative</code>. Las propiedades <a href=\\\"/es/docs/Web/CSS/top\\\"><code>top</code></a> y <a href=\\\"/es/docs/Web/CSS/bottom\\\"><code>bottom</code></a> especifican el desplazamiento vertical desde su posici\u00F3n original; las propiedades <a href=\\\"/es/docs/Web/CSS/left\\\"><code>left</code></a> y <a href=\\\"/es/docs/Web/CSS/right\\\"><code>right</code></a> especifican su desplazamiento horizontal.</li>\\n <li>Un <strong>elemento posicionado absolutamente</strong> es un elemento cuyo valor <a href=\\\"/en-US/docs/CSS/computed_value\\\">computado</a> de <code>position</code> es <code>absolute</code> o <code>fixed</code>. Las propiedades <a href=\\\"/es/docs/Web/CSS/top\\\"><code>top</code></a>, <a href=\\\"/es/docs/Web/CSS/right\\\"><code>right</code></a>, <a href=\\\"/es/docs/Web/CSS/bottom\\\"><code>bottom</code></a>, y <a href=\\\"/es/docs/Web/CSS/left\\\"><code>left</code></a> especifican el desplazamiento desde los bordes del <a href=\\\"https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block\\\"> bloque contenedor</a> del elemento. (El bloque contenedor es el ancestro relativo al cual el elemento est\u00E1 posicionado). Si el elemento tiene m\u00E1rgenes, se agregar\u00E1n al desplazamiento. el elemento establece un nuevo contexto de formato de bloque para su contenido</li>\\n <li>Un <strong>elemento posicionado fijamente </strong>es un elemento cuyo valor de <code>position </code><a href=\\\"/en-US/docs/CSS/computed_value\\\">computado</a> es <code>sticky</code>. Es tratado como un elemento posicionado relativamente hasta que su <a href=\\\"https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block\\\">bloque contenedor</a> cruza un l\u00EDmite establecido (como por ejemplo dando a <a href=\\\"/es/docs/Web/CSS/top\\\"><code>top</code></a> cualquier valor distinto de auto), dentro de su flujo principal (o el contenedor dentro del cual se mueve), desde el cual es tratado como \\\"fijo\\\" hasta que alcance el borde opuesto de su <a href=\\\"https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block\\\">bloque contenedor</a>.</li>\\n</ul>\\n\\n<p>La mayor\u00EDa de las veces, los elementos absolutamente posicionados que tienen su <a href=\\\"/es/docs/Web/CSS/height\\\" title=\\\"La propiedad CSS height especifica la altura del area de contenido de un elemento. El \u00E1rea de contenido est\u00E1 dentro del padding, borde, y margen del elemento.\\\"><code>height</code></a> y <a href=\\\"/es/docs/Web/CSS/width\\\" title=\\\"La propiedad CSS width especifica la anchura del area de contenido de un elemento. El \u00E1rea de contenido est\u00E1 dentro del padding, borde, y margen del elemento.\\\"><code>width</code></a> establecidos en <code>auto</code> son ajustados hasta acomodarse a su contenido. Sin embargo, elementos non-<a href=\\\"/en-US/docs/Web/CSS/Replaced_element\\\">replaced</a> y absolutamente posicionados se pueden crear para llenar el espacio vertical disponible, especificando tanto <a href=\\\"/es/docs/Web/CSS/top\\\" title=\\\"La propiedad top especifica parte de la posici\u00F3n de un elemento posicionado. No tiene efecto en elementos no posicionados.\\\"><code>top</code></a> como <a href=\\\"/es/docs/Web/CSS/bottom\\\" title=\\\"La documentaci\u00F3n acerca de este tema no ha sido escrita todav\u00EDa . \u00A1Por favor considera contribuir !\\\"><code>bottom</code></a>, y dejando <a href=\\\"/es/docs/Web/CSS/height\\\" title=\\\"La propiedad CSS height especifica la altura del area de contenido de un elemento. El \u00E1rea de contenido est\u00E1 dentro del padding, borde, y margen del elemento.\\\"><code>height</code></a> sin especificar (es decir, <code>auto</code>). De igual manera se pueden utilizar para llenar el espacio horizontal disponible especificando tanto <a href=\\\"/es/docs/Web/CSS/left\\\" title=\\\"La propiedad left especifica parte de la posici\u00F3n de un elemento (posicionado - es decir, con una posici\u00F3n determinada por c\u00F3digo).\\\"><code>left</code></a> como <a href=\\\"/es/docs/Web/CSS/right\\\" title=\\\"La propiedad right especifica parte de la posici\u00F3n de un elemento (posicionado - es decir, con una posici\u00F3n determinada por c\u00F3digo).\\\"><code>right</code></a>, y dando a <a href=\\\"/es/docs/Web/CSS/width\\\" title=\\\"La propiedad CSS width especifica la anchura del area de contenido de un elemento. El \u00E1rea de contenido est\u00E1 dentro del padding, borde, y margen del elemento.\\\"><code>width</code></a> el valor de <code>auto</code>.</p>\\n\\n<p>A excepci\u00F3n del caso anteriormente descrito (de elementos posicionados absolutamente rellenando el espacio disponible):</p>\\n\\n<ul>\\n <li>Si ambos, <code>top</code> y <code>bottom</code> est\u00E1n especificados (t\u00E9cnicamente, no <code>auto</code>), <code>top</code> gana.</li>\\n <li>Si ambos, <code>left</code> y <code>right</code>, est\u00E1n especificados, <code>left</code> gana cuando es <code>ltr</code> (Ingl\u00E9s, japon\u00E9s horizontal, etc.) y <code>right</code> gana cuando <a href=\\\"/es/docs/Web/CSS/direction\\\"><code>direction</code></a> es <code>rtl</code> (Persa, \u00E1rabe, hebreo, etc.).</li>\\n</ul>\"}},{\"type\":\"prose\",\"value\":{\"id\":\"Sintaxis\",\"title\":\"Sintaxis\",\"isH3\":false,\"content\":\"<p>La propiedad <code>position</code> es especificada como una palabra \u00FAnica elegida de la siguiente lista de valores.</p>\"}},{\"type\":\"prose\",\"value\":{\"id\":\"Valores\",\"title\":\"Valores\",\"isH3\":true,\"content\":\"<dl>\\n <dt id=\\\"static\\\"><code>static</code></dt>\\n <dd>El elemento es posicionado de acuerdo al flujo normal del documento. Las propiedades <a href=\\\"/es/docs/Web/CSS/top\\\" title=\\\"La propiedad top especifica parte de la posici\u00F3n de un elemento posicionado. No tiene efecto en elementos no posicionados.\\\"><code>top</code></a>, <a href=\\\"/es/docs/Web/CSS/right\\\" title=\\\"La propiedad right especifica parte de la posici\u00F3n de un elemento (posicionado - es decir, con una posici\u00F3n determinada por c\u00F3digo).\\\"><code>right</code></a>, <a href=\\\"/es/docs/Web/CSS/bottom\\\" title=\\\"La documentaci\u00F3n acerca de este tema no ha sido escrita todav\u00EDa . \u00A1Por favor considera contribuir !\\\"><code>bottom</code></a>, <a href=\\\"/es/docs/Web/CSS/left\\\" title=\\\"La propiedad left especifica parte de la posici\u00F3n de un elemento (posicionado - es decir, con una posici\u00F3n determinada por c\u00F3digo).\\\"><code>left</code></a>, and <a href=\\\"/es/docs/Web/CSS/z-index\\\" title=\\\"La propiedad CSS z-index indica el orden de un elemento posicionado y sus descendientes. Cuando varios elementos se superponen, los elementos con mayor valor z-index cubren aquellos con menor valor.\\\"><code>z-index</code></a> <em>no tienen efecto</em>. Este es el valor por defecto.</dd>\\n <dt id=\\\"relative\\\"><code>relative</code></dt>\\n <dd>El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado <em>con relaci\u00F3n a s\u00ED mismo</em>, con base en los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. El desplazamiento no afecta la posici\u00F3n de ning\u00FAn otro elemento; por lo que, el espacio que se le da al elemento en el esquema de la p\u00E1gina es el mismo como si la posici\u00F3n fuera <code>static</code>. Este valor crea un nuevo <a href=\\\"https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento\\\">contexto de apilamiento</a>, donde el valor de <code>z-index</code> no es <code>auto</code>. El efecto que tiene <code>relative</code> sobre los elementos <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code>, y <code>table-caption</code> no est\u00E1 definido.</dd>\\n <dt id=\\\"absolute\\\"><code>absolute</code></dt>\\n <dd>El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la p\u00E1gina. Es posicionado relativo a su ancestro posicionado m\u00E1s cercano, si lo hay; de lo contrario, se ubica relativo al <a href=\\\"https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block\\\">bloque contenedor</a> inicial. Su posici\u00F3n final est\u00E1 determinada por los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, y <code>left</code>.</dd>\\n <dd>Este valor crea un nuevo <a href=\\\"https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento\\\">contexto de apilamiento</a> cuando el valor de <code>z-index</code> no es <code>auto</code>. Elementos absolutamente posicionados pueden tener margen, y no colapsan con ning\u00FAn otro margen.</dd>\\n <dt id=\\\"fixed\\\"><code>fixed</code></dt>\\n <dd>El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la p\u00E1gina. Es posicionado con relaci\u00F3n al <a href=\\\"https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block\\\">bloque contenedor</a> inicial establecido por el <a href=\\\"/es/docs/Glossary/Viewport\\\">viewport</a>, excepto cuando uno de sus ancestros tiene una propiedad <code>transform</code>, <code>perspective</code>, o <code>filter</code> establecida en algo que no sea <code>none</code> (ver <a href=\\\"https://www.w3.org/TR/css-transforms-1/#propdef-transform\\\" class=\\\"external\\\">CSS Transforms Spec</a>), en cuyo caso ese ancestro se comporta como el bloque contenedor. (Notar que hay inconsistencias del navegador con <code>perspective</code> y <code>filter</code> contribuyendo a la formaci\u00F3n del bloque contenedor.) Su posici\u00F3n final es determinada por los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, y <code>left</code>.</dd>\\n <dd>Estos valores siempre crean un nuevo <a href=\\\"https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento\\\">contexto de apilamiento</a>. En documentos impresos, el elemento se coloca en la misma posici\u00F3n en <em>cada p\u00E1gina</em>.</dd>\\n <dt id=\\\"sticky\\\"><code>sticky</code> <span class=\\\"icon-only-inline\\\" title=\\\"This is an experimental API that should not be used in production code.\\\"><i class=\\\"icon-beaker\\\"> </i></span></dt>\\n <dd>El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado <em>con relaci\u00F3n a su ancestro que se desplace m\u00E1s cercano y su </em><a href=\\\"https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block\\\">bloque contenedor</a> (ancestro en nivel de bloque m\u00E1s cercano) incluyendo elementos relacionados a tablas, basados en los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, y <code>left</code>. El desplazamiento no afecta la posici\u00F3n de ning\u00FAn otro elmento.</dd>\\n <dd>Estos valores siempre crean un nuevo <a href=\\\"https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento\\\">contexto de apilamiento</a>. N\u00F3tese que un elemento sticky se \\\"adhiere\\\" a su ancestro m\u00E1s cercano que tiene un \\\"mecanismo de desplazamiento\\\" (creado cuando el <code>overflow</code> es <code>hidden</code>, <code>scroll</code>, <code>auto</code>, o bien <code>overlay</code>), a\u00FAn si ese ancestro no es el ancestro con desplazamiento m\u00E1s cercano. Esto inhibe efectivamente el comportamiento \\\"sticky\\\" (ver el <a href=\\\"https://github.com/w3c/csswg-drafts/issues/865\\\" class=\\\"external\\\">Github issue en W3C CSSWG</a>).</dd>\\n</dl>\"}},{\"type\":\"prose\",\"value\":{\"id\":\"Sintaxis_formal\",\"title\":\"Sintaxis formal\",\"isH3\":true,\"content\":\"<pre class=\\\"syntaxbox notranslate\\\">static <a href=\\\"/es/docs/CSS/Value_definition_syntax#Single_bar\\\" title=\\\"Single bar: exactly one of the entities must be present\\\">|</a> relative <a href=\\\"/es/docs/CSS/Value_definition_syntax#Single_bar\\\" title=\\\"Single bar: exactly one of the entities must be present\\\">|</a> absolute <a href=\\\"/es/docs/CSS/Value_definition_syntax#Single_bar\\\" title=\\\"Single bar: exactly one of the entities must be present\\\">|</a> sticky <a href=\\\"/es/docs/CSS/Value_definition_syntax#Single_bar\\\" title=\\\"Single bar: exactly one of the entities must be present\\\">|</a> fixed</pre>\"}},{\"type\":\"prose\",\"value\":{\"id\":\"Examples\",\"title\":\"Examples\",\"isH3\":false,\"content\":\"\"}},{\"type\":\"prose\",\"value\":{\"id\":\"Relative_positioning\",\"title\":\"Posicionamiento relativo\",\"isH3\":true,\"content\":\"<p>Elementos posicionados relativamente son desplazados una cantidad dada de su posici\u00F3n normal en el documento, pero sin que su desplazamiento afecte a otros elementos. En el ejemplo siguiente, n\u00F3tese c\u00F3mo los dem\u00E1s elementos se ubican como si \\\"Two\\\" estuviera ocupando el lugar de su ubicaci\u00F3n normal.</p>\\n\\n<h4 id=\\\"HTML\\\">HTML</h4>\\n\\n<pre class=\\\"brush: html notranslate\\\"><code><span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>div</span> <span class=\\\"token attr-name\\\">class</span><span class=\\\"token attr-value\\\"><span class=\\\"token punctuation attr-equals\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>box<span class=\\\"token punctuation\\\">\\\"</span></span> <span class=\\\"token attr-name\\\">id</span><span class=\\\"token attr-value\\\"><span class=\\\"token punctuation attr-equals\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>one<span class=\\\"token punctuation\\\">\\\"</span></span><span class=\\\"token punctuation\\\">></span></span>One<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>div</span><span class=\\\"token punctuation\\\">></span></span>\\n<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>div</span> <span class=\\\"token attr-name\\\">class</span><span class=\\\"token attr-value\\\"><span class=\\\"token punctuation attr-equals\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>box<span class=\\\"token punctuation\\\">\\\"</span></span> <span class=\\\"token attr-name\\\">id</span><span class=\\\"token attr-value\\\"><span class=\\\"token punctuation attr-equals\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>two<span class=\\\"token punctuation\\\">\\\"</span></span><span class=\\\"token punctuation\\\">></span></span>Two<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>div</span><span class=\\\"token punctuation\\\">></span></span>\\n<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>div</span> <span class=\\\"token attr-name\\\">class</span><span class=\\\"token attr-value\\\"><span class=\\\"token punctuation attr-equals\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>box<span class=\\\"token punctuation\\\">\\\"</span></span> <span class=\\\"token attr-name\\\">id</span><span class=\\\"token attr-value\\\"><span class=\\\"token punctuation attr-equals\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>three<span class=\\\"token punctuation\\\">\\\"</span></span><span class=\\\"token punctuation\\\">></span></span>Three<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>div</span><span class=\\\"token punctuation\\\">></span></span>\\n<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>div</span> <span class=\\\"token attr-name\\\">class</span><span class=\\\"token attr-value\\\"><span class=\\\"token punctuation attr-equals\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>box<span class=\\\"token punctuation\\\">\\\"</span></span> <span class=\\\"token attr-name\\\">id</span><span class=\\\"token attr-value\\\"><span class=\\\"token punctuation attr-equals\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>four<span class=\\\"token punctuation\\\">\\\"</span></span><span class=\\\"token punctuation\\\">></span></span>Four<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>div</span><span class=\\\"token punctuation\\\">></span></span>\\n</code></pre>\\n\\n<h4 id=\\\"CSS\\\">CSS</h4>\\n\\n<pre class=\\\"brush: css notranslate\\\"><code><span class=\\\"token selector\\\">.box</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">display</span><span class=\\\"token punctuation\\\">:</span> inline-block<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">width</span><span class=\\\"token punctuation\\\">:</span> 100px<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">height</span><span class=\\\"token punctuation\\\">:</span> 100px<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">background</span><span class=\\\"token punctuation\\\">:</span> red<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">color</span><span class=\\\"token punctuation\\\">:</span> white<span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span>\\n\\n<span class=\\\"token selector\\\">#two</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">position</span><span class=\\\"token punctuation\\\">:</span> relative<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">top</span><span class=\\\"token punctuation\\\">:</span> 20px<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">left</span><span class=\\\"token punctuation\\\">:</span> 20px<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">background</span><span class=\\\"token punctuation\\\">:</span> blue<span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span>\\n</code></pre>\\n\\n<p><iframe class=\\\"live-sample-frame sample-code-frame\\\" frameborder=\\\"0\\\" height=\\\"200px\\\" id=\\\"frame_Relative_positioning\\\" src=\\\"https://mdn.mozillademos.org/es/docs/Web/CSS/position$samples/Relative_positioning?revision=1628557\\\" width=\\\"600px\\\" loading=\\\"lazy\\\"></iframe></p>\"}},{\"type\":\"prose\",\"value\":{\"id\":\"Absolute_positioning\",\"title\":\"Posicionamiento absoluto\",\"isH3\":true,\"content\":\"<p>Los elementos posicionados relativamente se mantienen en el flujo normal del documento. Por el contrario, un elemento posicionado absolutamente es removido del flujo\u00F1 de esta manera, los dem\u00E1s elementos se posicionan como si el mismo no existiera. El elemento posicionado absolutamente se posiciona relativamente a su<em>ancestro posicionado m\u00E1s cercano</em> (es decir, el ancestro m\u00E1s cercano que no es <code>static</code>). Si no hay ning\u00FAn ancestro posicionado se ubica relativo al <a href=\\\"https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block\\\">bloque contenedor</a> inicial. En el ejemplo siguiente, la caja \\\"Two\\\" no tiene un ancestro posicionado, por lo tanto se posiciona relativo al <code><body></code> del documento.</p>\\n\\n<h4 id=\\\"HTML_2\\\">HTML</h4>\\n\\n<pre class=\\\"brush: html notranslate\\\"><code><span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>div</span> <span class=\\\"token attr-name\\\">class</span><span class=\\\"token attr-value\\\"><span class=\\\"token punctuation attr-equals\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>box<span class=\\\"token punctuation\\\">\\\"</span></span> <span class=\\\"token attr-name\\\">id</span><span class=\\\"token attr-value\\\"><span class=\\\"token punctuation attr-equals\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>one<span class=\\\"token punctuation\\\">\\\"</span></span><span class=\\\"token punctuation\\\">></span></span>One<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>div</span><span class=\\\"token punctuation\\\">></span></span>\\n<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>div</span> <span class=\\\"token attr-name\\\">class</span><span class=\\\"token attr-value\\\"><span class=\\\"token punctuation attr-equals\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>box<span class=\\\"token punctuation\\\">\\\"</span></span> <span class=\\\"token attr-name\\\">id</span><span class=\\\"token attr-value\\\"><span class=\\\"token punctuation attr-equals\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>two<span class=\\\"token punctuation\\\">\\\"</span></span><span class=\\\"token punctuation\\\">></span></span>Two<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>div</span><span class=\\\"token punctuation\\\">></span></span>\\n<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>div</span> <span class=\\\"token attr-name\\\">class</span><span class=\\\"token attr-value\\\"><span class=\\\"token punctuation attr-equals\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>box<span class=\\\"token punctuation\\\">\\\"</span></span> <span class=\\\"token attr-name\\\">id</span><span class=\\\"token attr-value\\\"><span class=\\\"token punctuation attr-equals\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>three<span class=\\\"token punctuation\\\">\\\"</span></span><span class=\\\"token punctuation\\\">></span></span>Three<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>div</span><span class=\\\"token punctuation\\\">></span></span>\\n<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>div</span> <span class=\\\"token attr-name\\\">class</span><span class=\\\"token attr-value\\\"><span class=\\\"token punctuation attr-equals\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>box<span class=\\\"token punctuation\\\">\\\"</span></span> <span class=\\\"token attr-name\\\">id</span><span class=\\\"token attr-value\\\"><span class=\\\"token punctuation attr-equals\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>four<span class=\\\"token punctuation\\\">\\\"</span></span><span class=\\\"token punctuation\\\">></span></span>Four<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>div</span><span class=\\\"token punctuation\\\">></span></span></code></pre>\\n\\n<h4 id=\\\"CSS_2\\\">CSS</h4>\\n\\n<pre class=\\\"brush: css notranslate\\\"><code><span class=\\\"token selector\\\">.box</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">display</span><span class=\\\"token punctuation\\\">:</span> inline-block<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">width</span><span class=\\\"token punctuation\\\">:</span> 100px<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">height</span><span class=\\\"token punctuation\\\">:</span> 100px<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">background</span><span class=\\\"token punctuation\\\">:</span> red<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">color</span><span class=\\\"token punctuation\\\">:</span> white<span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span>\\n\\n<span class=\\\"token selector\\\">#two</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">position</span><span class=\\\"token punctuation\\\">:</span> absolute<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">top</span><span class=\\\"token punctuation\\\">:</span> 20px<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">left</span><span class=\\\"token punctuation\\\">:</span> 20px<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">background</span><span class=\\\"token punctuation\\\">:</span> blue<span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span></code></pre>\\n\\n<p><iframe class=\\\"live-sample-frame sample-code-frame\\\" frameborder=\\\"0\\\" height=\\\"200px\\\" id=\\\"frame_Absolute_positioning\\\" src=\\\"https://mdn.mozillademos.org/es/docs/Web/CSS/position$samples/Absolute_positioning?revision=1628557\\\" width=\\\"800px\\\" loading=\\\"lazy\\\"></iframe></p>\"}},{\"type\":\"prose\",\"value\":{\"id\":\"Fixed_positioning\",\"title\":\"Posicionamiento fijo\",\"isH3\":true,\"content\":\"<p>El posicionamiento fijo es similar al posicionamiento absoluto, con la excepci\u00F3n de que el bloque contenedor del elemento es el <em>viewport</em>. Esto puede usarse para crear un elemento flotante que se mantiene en la misma posici\u00F3n independientemente del desplazamiento. En el ejemplo siguiente, la caja \\\"One\\\" est\u00E1 fijada a 80 pixels del l\u00EDmite superior de la p\u00E1gina y 10 pixels a la izquierda. A\u00FAn luego de desplazarse, se mantiene en el mismo lugar relativo al viewport.</p>\\n\\n<pre class=\\\"brush: html notranslate\\\"><code><span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>div</span> <span class=\\\"token attr-name\\\">class</span><span class=\\\"token attr-value\\\"><span class=\\\"token punctuation attr-equals\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>outer<span class=\\\"token punctuation\\\">\\\"</span></span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>p</span><span class=\\\"token punctuation\\\">></span></span>\\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.\\n Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.\\n Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.\\n Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.\\n Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.\\n Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.\\n Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>p</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>p</span><span class=\\\"token punctuation\\\">></span></span>\\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.\\n Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.\\n Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.\\n Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.\\n Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.\\n Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.\\n Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>p</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>div</span> <span class=\\\"token attr-name\\\">class</span><span class=\\\"token attr-value\\\"><span class=\\\"token punctuation attr-equals\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>box<span class=\\\"token punctuation\\\">\\\"</span></span> <span class=\\\"token attr-name\\\">id</span><span class=\\\"token attr-value\\\"><span class=\\\"token punctuation attr-equals\\\">=</span><span class=\\\"token punctuation\\\">\\\"</span>one<span class=\\\"token punctuation\\\">\\\"</span></span><span class=\\\"token punctuation\\\">></span></span>One<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>div</span><span class=\\\"token punctuation\\\">></span></span>\\n<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>div</span><span class=\\\"token punctuation\\\">></span></span>\\n</code></pre>\\n\\n<h4 id=\\\"CSS_3\\\">CSS</h4>\\n\\n<pre class=\\\"brush: css notranslate\\\"><code><span class=\\\"token selector\\\">.box</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">width</span><span class=\\\"token punctuation\\\">:</span> 100px<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">height</span><span class=\\\"token punctuation\\\">:</span> 100px<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">background</span><span class=\\\"token punctuation\\\">:</span> red<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">color</span><span class=\\\"token punctuation\\\">:</span> white<span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span>\\n\\n<span class=\\\"token selector\\\">#one</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">position</span><span class=\\\"token punctuation\\\">:</span> fixed<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">top</span><span class=\\\"token punctuation\\\">:</span> 80px<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">left</span><span class=\\\"token punctuation\\\">:</span> 10px<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">background</span><span class=\\\"token punctuation\\\">:</span> blue<span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span>\\n\\n<span class=\\\"token selector\\\">.outer</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">width</span><span class=\\\"token punctuation\\\">:</span> 500px<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">height</span><span class=\\\"token punctuation\\\">:</span> 300px<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">overflow</span><span class=\\\"token punctuation\\\">:</span> scroll<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">padding-left</span><span class=\\\"token punctuation\\\">:</span> 150px<span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span>\\n</code></pre>\\n\\n<p><iframe class=\\\"live-sample-frame sample-code-frame\\\" frameborder=\\\"0\\\" height=\\\"300px\\\" id=\\\"frame_Fixed_positioning\\\" src=\\\"https://mdn.mozillademos.org/es/docs/Web/CSS/position$samples/Fixed_positioning?revision=1628557\\\" width=\\\"800px\\\" loading=\\\"lazy\\\"></iframe></p>\"}},{\"type\":\"prose\",\"value\":{\"id\":\"Sticky_positioning\",\"title\":\"Posicionamiento sticky\",\"isH3\":true,\"content\":\"<p>El posicionamiento sticky puede considerarse un h\u00EDbrido de los posicionamientos relativo y fijo. Un elemento con posicionamiento sticky es tratado como un elemento posicionado relativamente hasta que cruza un umbral especificado, en cuyo punto se trata como fijo hasta que alcanza el l\u00EDmite de su padre. Por ejemplo...</p>\\n\\n<pre class=\\\"brush: css notranslate\\\"><code><span class=\\\"token selector\\\">#one</span> <span class=\\\"token punctuation\\\">{</span> <span class=\\\"token property\\\">position</span><span class=\\\"token punctuation\\\">:</span> sticky<span class=\\\"token punctuation\\\">;</span> <span class=\\\"token property\\\">top</span><span class=\\\"token punctuation\\\">:</span> 10px<span class=\\\"token punctuation\\\">;</span> <span class=\\\"token punctuation\\\">}</span></code></pre>\\n\\n<p>...posicionar\u00EDa el elemento con id <em>uno </em>relativamente hasta que el viewport sea desplazado de manera tal que el elemento est\u00E9 a menos de 10 p\u00EDxeles del l\u00EDmite superior. M\u00E1s all\u00E1 de ese umbral, el elemento ser\u00EDa fijado a 10 p\u00EDxeles del l\u00EDmite superior.</p>\\n\\n<p>Un uso com\u00FAn para el posicionamiento sticky es para los encabezados en una lista alfab\u00E9tica. El encabezado \\\"B\\\" aparecer\u00E1 justo por debajo de los \u00EDtems que comienzan con \\\"A\\\" hasta que se hayan desplazado m\u00E1s all\u00E1 de la pantalla. En vez de deslizarse fuera de la pantalla como el resto del contenido, el encabezado \\\"B\\\" se mantendr\u00E1 fijado al l\u00EDmite superior del viewport hasta que todos los \u00EDtems \\\"B\\\" se hayan desplazado fuera de la pantalla, en cuyo punto ser\u00E1 cubierto por el encabezado \\\"C\\\", y as\u00ED sucesivamente. Se debe especificar un umbral con al menos uno de <code style=\\\"\\\">top</code><span style=\\\"\\\">, </span><code style=\\\"\\\">right</code><span style=\\\"\\\">, </span><code style=\\\"\\\">bottom</code><span style=\\\"\\\">, or </span><code style=\\\"\\\">left</code><span style=\\\"\\\"> para que el posicionamiento sticky se comporte de forma esperada. Caso contrario, ser\u00E1 indistinguible del posicionamiento relativo.</span></p>\\n\\n<h4 id=\\\"HTML_3\\\">HTML</h4>\\n\\n<pre class=\\\"brush: html notranslate\\\"><code><span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dl</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>div</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dt</span><span class=\\\"token punctuation\\\">></span></span>A<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dt</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dd</span><span class=\\\"token punctuation\\\">></span></span>Andrew W.K.<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dd</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dd</span><span class=\\\"token punctuation\\\">></span></span>Apparat<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dd</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dd</span><span class=\\\"token punctuation\\\">></span></span>Arcade Fire<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dd</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dd</span><span class=\\\"token punctuation\\\">></span></span>At The Drive-In<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dd</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dd</span><span class=\\\"token punctuation\\\">></span></span>Aziz Ansari<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dd</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>div</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>div</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dt</span><span class=\\\"token punctuation\\\">></span></span>C<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dt</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dd</span><span class=\\\"token punctuation\\\">></span></span>Chromeo<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dd</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dd</span><span class=\\\"token punctuation\\\">></span></span>Common<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dd</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dd</span><span class=\\\"token punctuation\\\">></span></span>Converge<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dd</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dd</span><span class=\\\"token punctuation\\\">></span></span>Crystal Castles<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dd</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dd</span><span class=\\\"token punctuation\\\">></span></span>Cursive<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dd</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>div</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>div</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dt</span><span class=\\\"token punctuation\\\">></span></span>E<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dt</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dd</span><span class=\\\"token punctuation\\\">></span></span>Explosions In The Sky<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dd</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>div</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>div</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dt</span><span class=\\\"token punctuation\\\">></span></span>T<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dt</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dd</span><span class=\\\"token punctuation\\\">></span></span>Ted Leo <span class=\\\"token entity named-entity\\\" title=\\\"&\\\">&amp;</span> The Pharmacists<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dd</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dd</span><span class=\\\"token punctuation\\\">></span></span>T-Pain<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dd</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dd</span><span class=\\\"token punctuation\\\">></span></span>Thrice<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dd</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dd</span><span class=\\\"token punctuation\\\">></span></span>TV On The Radio<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dd</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"><</span>dd</span><span class=\\\"token punctuation\\\">></span></span>Two Gallants<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dd</span><span class=\\\"token punctuation\\\">></span></span>\\n <span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>div</span><span class=\\\"token punctuation\\\">></span></span>\\n<span class=\\\"token tag\\\"><span class=\\\"token tag\\\"><span class=\\\"token punctuation\\\"></</span>dl</span><span class=\\\"token punctuation\\\">></span></span>\\n</code></pre>\\n\\n<h4 id=\\\"CSS_4\\\">CSS</h4>\\n\\n<pre class=\\\"brush: css notranslate\\\"><code><span class=\\\"token selector\\\">*</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">box-sizing</span><span class=\\\"token punctuation\\\">:</span> border-box<span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span>\\n\\n<span class=\\\"token selector\\\">dl > div</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">background</span><span class=\\\"token punctuation\\\">:</span> #FFF<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">padding</span><span class=\\\"token punctuation\\\">:</span> 24px 0 0 0<span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span>\\n\\n<span class=\\\"token selector\\\">dt</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">background</span><span class=\\\"token punctuation\\\">:</span> #B8C1C8<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">border-bottom</span><span class=\\\"token punctuation\\\">:</span> 1px solid #989EA4<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">border-top</span><span class=\\\"token punctuation\\\">:</span> 1px solid #717D85<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">color</span><span class=\\\"token punctuation\\\">:</span> #FFF<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">font</span><span class=\\\"token punctuation\\\">:</span> bold 18px/21px Helvetica<span class=\\\"token punctuation\\\">,</span> Arial<span class=\\\"token punctuation\\\">,</span> sans-serif<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">margin</span><span class=\\\"token punctuation\\\">:</span> 0<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">padding</span><span class=\\\"token punctuation\\\">:</span> 2px 0 0 12px<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">position</span><span class=\\\"token punctuation\\\">:</span> -webkit-sticky<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">position</span><span class=\\\"token punctuation\\\">:</span> sticky<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">top</span><span class=\\\"token punctuation\\\">:</span> -1px<span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span>\\n\\n<span class=\\\"token selector\\\">dd</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">font</span><span class=\\\"token punctuation\\\">:</span> bold 20px/45px Helvetica<span class=\\\"token punctuation\\\">,</span> Arial<span class=\\\"token punctuation\\\">,</span> sans-serif<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">margin</span><span class=\\\"token punctuation\\\">:</span> 0<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">padding</span><span class=\\\"token punctuation\\\">:</span> 0 0 0 12px<span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token property\\\">white-space</span><span class=\\\"token punctuation\\\">:</span> nowrap<span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span>\\n\\n<span class=\\\"token selector\\\">dd + dd</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">border-top</span><span class=\\\"token punctuation\\\">:</span> 1px solid #CCC<span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span>\\n</code></pre>\\n\\n<p><iframe class=\\\"live-sample-frame sample-code-frame\\\" frameborder=\\\"0\\\" height=\\\"300px\\\" id=\\\"frame_Sticky_positioning\\\" src=\\\"https://mdn.mozillademos.org/es/docs/Web/CSS/position$samples/Sticky_positioning?revision=1628557\\\" width=\\\"500px\\\" loading=\\\"lazy\\\"></iframe></p>\\n\\n<ul>\\n</ul>\"}},{\"type\":\"prose\",\"value\":{\"id\":\"Consideraciones_de_accesibilidad\",\"title\":\"Consideraciones de accesibilidad\",\"isH3\":false,\"content\":\"<p>Asegurarse de que los elementos posicionados con valor <code>absolute</code> o <code>fixed</code> no oscurezcan el resto del contenido cuando la p\u00E1gina sea ampliada para aumentar el tama\u00F1o del texto.</p>\\n\\n<ul>\\n <li><a href=\\\"https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background\\\" class=\\\"external\\\">MDN entendiendo el WCAG, explicaciones de los lineamientos 1.4.</a></li>\\n <li><a href=\\\"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html\\\" rel=\\\"noopener\\\" class=\\\"external\\\">Presentaci\u00F3n visual: Entendiendo SC 1.4.8 | Entendiendo WCAG 2.0</a></li>\\n</ul>\"}},{\"type\":\"prose\",\"value\":{\"id\":\"Performance_y_accesibilidad\",\"title\":\"Performance y accesibilidad\",\"isH3\":true,\"content\":\"<p>Los elementos que se desplazan que contienen contenido <code>fixed</code> o <code>sticky</code> content pueden ocasionar problemas de performance y accesibilidad. Mientras un usuario desplaza la p\u00E1gina, el navegador debe realizar repaint del contenido sticky o fijo en una nueva locaci\u00F3n. Dependiendo del contenido que precisa ser repainted, la performance del navegador y la velocidad de procesamiento del dispositivo, el navegador podr\u00EDa no ser capaz de realizar el repaint a 60 <abbr title=\\\"frames per second\\\">fps</abbr>, ocasionando problemas de accesibilidad para personas con sensibilidades y desprolijidad para todos. Una soluci\u00F3n es agregar <a href=\\\"/es/docs/Web/CSS/will-change\\\" title=\\\"La documentaci\u00F3n acerca de este tema no ha sido escrita todav\u00EDa . \u00A1Por favor considera contribuir !\\\"><code>will-change: transform</code></a> a los elementos posicionados para renderizar el elemento en su propia capa, mejorando la velocidad del repaint y por lo tanto mejorando performance y accesibilidad.</p>\"}},{\"type\":\"prose\",\"value\":{\"id\":\"Specifications\",\"title\":\"Especificaciones\",\"isH3\":false,\"content\":\"<table class=\\\"standard-table\\\">\\n <thead>\\n <tr>\\n <th scope=\\\"col\\\">Especificaci\u00F3n</th>\\n <th scope=\\\"col\\\">Status</th>\\n <th scope=\\\"col\\\">Comentario</th>\\n </tr>\\n </thead>\\n <tbody>\\n <tr>\\n <td><a class=\\\"external\\\" href=\\\"https://www.w3.org/TR/CSS2/visuren.html#propdef-position\\\" hreflang=\\\"en\\\" lang=\\\"en\\\">CSS Level 2 (Revision 1)<br><small lang=\\\"es\\\">La definici\u00F3n de 'position' en esta especificaci\u00F3n.</small></a></td>\\n <td><span class=\\\"spec-REC\\\">Recommendation</span></td>\\n <td></td>\\n </tr>\\n <tr>\\n <td><a class=\\\"external\\\" href=\\\"https://drafts.csswg.org/css-position-3/#position-property\\\" hreflang=\\\"en\\\" lang=\\\"en\\\">CSS Positioned Layout Module Level 3<br><small lang=\\\"es\\\">La definici\u00F3n de 'position' en esta especificaci\u00F3n.</small></a></td>\\n <td><span class=\\\"spec-WD\\\">Working Draft</span></td>\\n <td>A\u00F1ade valor de la propiedad <code>sticky</code>.</td>\\n </tr>\\n </tbody>\\n</table>\\n\\n<table class=\\\"properties\\\"><tbody><tr><th scope=\\\"row\\\"><a href=\\\"/es/docs/Web/CSS/Valor_inicial\\\">Valor inicial</a></th><td><code>static</code></td></tr><tr><th scope=\\\"row\\\">Applies to</th><td>all elements</td></tr><tr><th scope=\\\"row\\\"><a href=\\\"/es/docs/Web/CSS/inheritance\\\">Heredable</a></th><td>no</td></tr><tr><th scope=\\\"row\\\"><a href=\\\"/es/docs/Web/CSS/Valor_calculado\\\">Valor calculado</a></th><td>como se especifica</td></tr><tr><th scope=\\\"row\\\">Animation type</th><td>discrete</td></tr><tr><th scope=\\\"row\\\">Creates <a href=\\\"/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\\\">stacking context</a></th><td>yes</td></tr></tbody></table>\"}},{\"type\":\"browser_compatibility\",\"value\":{\"title\":\"Compatibilidad\",\"id\":\"Browser_compatibility\",\"isH3\":false,\"query\":\"css.properties.position\",\"dataURL\":\"/es/docs/Web/CSS/position/bcd.json\"}},{\"type\":\"prose\",\"value\":{\"id\":null,\"title\":null,\"isH3\":false,\"content\":\"<div class=\\\"hidden\\\">La tabla de compatibilidad en esta p\u00E1gina es generada por una data estructurada. Si deseas contribuir a la data, por favor entra a <a href=\\\"https://github.com/mdn/browser-compat-data\\\" rel=\\\"noopener\\\" class=\\\"external\\\">https://github.com/mdn/browser-compat-data</a> y env\u00EDanos un pull request.</div>\"}}],\"toc\":[{\"text\":\"Sintaxis\",\"id\":\"Sintaxis\"},{\"text\":\"Examples\",\"id\":\"Examples\"},{\"text\":\"Consideraciones de accesibilidad\",\"id\":\"Consideraciones_de_accesibilidad\"},{\"text\":\"Especificaciones\",\"id\":\"Specifications\"},{\"text\":\"Compatibilidad\",\"id\":\"Browser_compatibility\"}],\"summary\":\"La propiedad position de CSS especifica c\u00F3mo un elemento es posicionado en\u00A0el documento. Las propiedades top, right, bottom, y left determinan la ubicaci\u00F3n final de los elementos posicionados.\",\"popularity\":0.083,\"modified\":\"2020-10-15T21:15:59.180Z\",\"other_translations\":[{\"locale\":\"en-US\",\"url\":\"/en-US/docs/Web/CSS/position\",\"title\":\"position\"}],\"source\":{\"folder\":\"es/web/css/position\",\"github_url\":\"https://github.com/mdn/translated-content/blob/main/files/es/web/css/position/index.html\",\"last_commit_url\":\"https://github.com/mdn/translated-content/commit/null\"},\"parents\":[{\"uri\":\"/es/docs/Web\",\"title\":\"Tecnolog\u00EDa para desarrolladores web\"},{\"uri\":\"/es/docs/Web/CSS\",\"title\":\"CSS\"},{\"uri\":\"/es/docs/Web/CSS/position\",\"title\":\"position\"}],\"pageTitle\":\"position - CSS | MDN\"}");</script></body></html>