{"id":1288,"date":"2024-08-01T18:31:02","date_gmt":"2024-08-01T16:31:02","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1288"},"modified":"2024-08-01T18:31:03","modified_gmt":"2024-08-01T16:31:03","slug":"32-la-propiedad-css-position","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/32-la-propiedad-css-position\/","title":{"rendered":"32. La propiedad CSS position"},"content":{"rendered":"\n<p>La propiedad <strong><em>position<\/em><\/strong> especifica el tipo de m\u00e9todo de posicionamiento utilizado para un elemento (<strong><em>static<\/em><\/strong>, <strong><em>relative<\/em><\/strong>, <strong><em>fixed<\/em><\/strong>, <strong><em>absolute<\/em> <\/strong>o <strong><em>sticky<\/em><\/strong>). A continuaci\u00f3n, los elementos se colocan utilizando las propiedades superior, inferior, izquierda y derecha. Sin embargo, estas propiedades no funcionar\u00e1n a menos que la propiedad <strong><em>position<\/em><\/strong> se establezca primero. Tambi\u00e9n funcionan de manera diferente seg\u00fan el valor de la posici\u00f3n.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Por lo tanto, los 5 diferentes valores que podemos encontrar son:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>static<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>relative<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>fixed<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>absolute<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>sticky<\/em><\/strong><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">position: static;<\/h2>\n\n\n\n<p>Los elementos HTML se colocan est\u00e1ticos de forma predeterminada. Los elementos posicionados est\u00e1ticos no se ven afectados por las propiedades <strong><em>top<\/em><\/strong>, <strong><em>right<\/em><\/strong>, <strong><em>bottom<\/em> <\/strong>e <strong><em>left<\/em> <\/strong>. Un elemento con <strong><em>position: static;<\/em><\/strong> no est\u00e1 posicionado de ninguna manera especial, siempre se posiciona de acuerdo con el flujo normal de la p\u00e1gina.<\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>  &lt;head><br>    &lt;style><br>      div.static {<br>        position: static;<br>        border: 3px solid #73ad21;<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;h2>position: static;&lt;\/h2><br><br>    &lt;p><br>      An element with position: static; is not positioned in any special way; it<br>      is always positioned according to the normal flow of the page:<br>    &lt;\/p><br><br>    &lt;div class=\"static\">This div element has position: static;&lt;\/div><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">position: relative<\/h2>\n\n\n\n<p>Un elemento con <strong><em>position: relative;<\/em><\/strong> se coloca en relaci\u00f3n con su posici\u00f3n normal. Establecer las propiedades <strong><em>top<\/em><\/strong>, <strong><em>right<\/em><\/strong>, <strong><em>bottom<\/em><\/strong> e <strong><em>left<\/em><\/strong> de un elemento relativamente posicionado har\u00e1 que se ajuste fuera de su posici\u00f3n normal. El resto del contenido no se ajustar\u00e1 para encajar en ning\u00fan espacio dejado por el elemento.<\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>  &lt;head><br>    &lt;style><br>      div.relative {<br>        position: relative;<br>        left: 30px;<br>        border: 3px solid #73ad21;<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;h2>position: relative;&lt;\/h2><br><br>    &lt;p><br>      An element with position: relative; is positioned relative to its normal<br>      position:<br>    &lt;\/p><br><br>    &lt;div class=\"relative\">This div element has position: relative;&lt;\/div><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">position: fixed;<\/h2>\n\n\n\n<p>Un elemento con <strong><em>position: fixed;<\/em><\/strong> se coloca en relaci\u00f3n con la ventana gr\u00e1fica, lo que significa que siempre permanece en el mismo lugar, incluso si se desplaza la p\u00e1gina. Las propiedades <strong><em>top<\/em><\/strong>, <strong><em>right<\/em><\/strong>, <strong><em>bottom<\/em> <\/strong>e <strong><em>left<\/em> <\/strong>se utilizan para colocar el elemento. Un elemento fijo no deja un espacio en la p\u00e1gina donde normalmente habr\u00eda estado ubicado. Observa el elemento fijo en la esquina inferior derecha de la p\u00e1gina. Aqu\u00ed est\u00e1 el CSS que se utiliza.<\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>  &lt;head><br>    &lt;style><br>      div.fixed {<br>        position: fixed;<br>        bottom: 0;<br>        right: 0;<br>        width: 300px;<br>        border: 3px solid #73ad21;<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;h2>position: fixed;&lt;\/h2><br><br>    &lt;p><br>      An element with position: fixed; is positioned relative to the viewport,<br>      which means it always stays in the same place even if the page is<br>      scrolled:<br>    &lt;\/p><br><br>    &lt;div class=\"fixed\">This div element has position: fixed;&lt;\/div><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">position: absolute;<\/h2>\n\n\n\n<p>Un elemento con <strong><em>position: absolute;<\/em><\/strong> se coloca en relaci\u00f3n con el ancestro posicionado m\u00e1s cercano (en lugar de posicionarse en relaci\u00f3n con la ventana gr\u00e1fica, como fijo). Sin embargo; si un elemento con posici\u00f3n absoluta no tiene ancestros con posici\u00f3n, utiliza el cuerpo del documento y se mueve junto con el desplazamiento de la p\u00e1gina.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Nota<\/strong>: Los elementos de posici\u00f3n absoluta se eliminan del flujo normal y pueden superponerse a los elementos.<\/p>\n<\/blockquote>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>  &lt;head><br>    &lt;style><br>      div.relative {<br>        position: relative;<br>        width: 400px;<br>        height: 200px;<br>        border: 3px solid #73ad21;<br>      }<br><br>      div.absolute {<br>        position: absolute;<br>        top: 80px;<br>        right: 0;<br>        width: 200px;<br>        height: 100px;<br>        border: 3px solid #73ad21;<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;h2>position: absolute;&lt;\/h2><br><br>    &lt;p><br>      An element with position: absolute; is positioned relative to the nearest<br>      positioned ancestor (instead of positioned relative to the viewport, like<br>      fixed):<br>    &lt;\/p><br><br>    &lt;div class=\"relative\"><br>      This div element has position: relative;<br>      &lt;div class=\"absolute\">This div element has position: absolute;&lt;\/div><br>    &lt;\/div><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">position: sticky;<\/h2>\n\n\n\n<p>Un elemento con <strong><em>position: sticky;<\/em><\/strong> se posiciona en funci\u00f3n de la posici\u00f3n de desplazamiento del usuario. Un elemento fijo alterna entre relativo y fijo, dependiendo de la posici\u00f3n de desplazamiento. Se coloca en relaci\u00f3n hasta que se alcanza una posici\u00f3n de desplazamiento determinada en la ventana gr\u00e1fica; luego, se \u00abpega\u00bb en su lugar (como <strong><em>position: fixed;<\/em><\/strong>).<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Nota<\/strong>: Internet Explorer no admite el posicionamiento fijo. Safari requiere un prefijo <strong><em>-webkit-<\/em><\/strong> (ver ejemplo a continuaci\u00f3n). Tambi\u00e9n debe especificar al menos uno de <strong><em>top<\/em><\/strong>, <strong><em>right<\/em><\/strong>, <strong><em>bottom<\/em><\/strong>y <strong><em>left<\/em><\/strong>para que funcione el posicionamiento fijo.<\/p>\n<\/blockquote>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>  &lt;head><br>    &lt;style><br>      div.sticky {<br>        position: -webkit-sticky;<br>        position: sticky;<br>        top: 0;<br>        padding: 5px;<br>        background-color: #cae8ca;<br>        border: 2px solid #4caf50;<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;p><br>      Try to &lt;b>scroll&lt;\/b> inside this frame to understand how sticky<br>      positioning works.<br>    &lt;\/p><br><br>    &lt;div class=\"sticky\">I am sticky!&lt;\/div><br><br>    &lt;div style=\"padding-bottom: 2000px\"><br>      &lt;p><br>        In this example, the sticky element sticks to the top of the page (top:<br>        0), when you reach its scroll position.<br>      &lt;\/p><br>      &lt;p>Scroll back up to remove the stickyness.&lt;\/p><br>      &lt;p><br>        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum<br>        definitiones no quo, maluisset concludaturque et eum, altera fabulas ut<br>        quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert<br>        laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no<br>        molestiae voluptatibus.<br>      &lt;\/p><br>      &lt;p><br>        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum<br>        definitiones no quo, maluisset concludaturque et eum, altera fabulas ut<br>        quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert<br>        laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no<br>        molestiae voluptatibus.<br>      &lt;\/p><br>    &lt;\/div><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Posicionar texto en una imagen<\/h2>\n\n\n\n<p>Veamos 5 ejm de como posicionar texto en una imagen<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Posicionar texto arriba a la izquierda<\/h3>\n\n\n\n<p>El c\u00f3digo es el siguiente:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>  &lt;head><br>    &lt;style><br>      .container {<br>        position: relative;<br>      }<br><br>      .topleft {<br>        position: absolute;<br>        top: 8px;<br>        left: 16px;<br>        font-size: 18px;<br>      }<br><br>      img {<br>        width: 100%;<br>        height: auto;<br>        opacity: 0.3;<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;h2>Image Text&lt;\/h2><br>    &lt;p>Add some text to an image in the top left corner:&lt;\/p><br><br>    &lt;div class=\"container\"><br>      &lt;img<br>        src=\"img_5terre_wide.jpg\"<br>        alt=\"Cinque Terre\"<br>        width=\"1000\"<br>        height=\"300\"<br>      \/><br>      &lt;div class=\"topleft\">Top Left&lt;\/div><br>    &lt;\/div><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Posicionar texto arriba a la derecha<\/h3>\n\n\n\n<p>El c\u00f3digo es el siguiente:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>  &lt;head><br>    &lt;style><br>      .container {<br>        position: relative;<br>      }<br><br>      .topright {<br>        position: absolute;<br>        top: 8px;<br>        right: 16px;<br>        font-size: 18px;<br>      }<br><br>      img {<br>        width: 100%;<br>        height: auto;<br>        opacity: 0.3;<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;h2>Image Text&lt;\/h2><br>    &lt;p>Add some text to an image in the top right corner:&lt;\/p><br><br>    &lt;div class=\"container\"><br>      &lt;img<br>        src=\"img_5terre_wide.jpg\"<br>        alt=\"Cinque Terre\"<br>        width=\"1000\"<br>        height=\"300\"<br>      \/><br>      &lt;div class=\"topright\">Top Right&lt;\/div><br>    &lt;\/div><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Texto centrado<\/h3>\n\n\n\n<p>El c\u00f3digo es el siguiente:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>  &lt;head><br>    &lt;style><br>      .container {<br>        position: relative;<br>      }<br><br>      .center {<br>        position: absolute;<br>        top: 50%;<br>        width: 100%;<br>        text-align: center;<br>        font-size: 18px;<br>      }<br><br>      img {<br>        width: 100%;<br>        height: auto;<br>        opacity: 0.3;<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;h2>Image Text&lt;\/h2><br><br>    &lt;p>Center text in image:&lt;\/p><br><br>    &lt;div class=\"container\"><br>      &lt;img<br>        src=\"img_5terre_wide.jpg\"<br>        alt=\"Cinque Terre\"<br>        width=\"1000\"<br>        height=\"300\"<br>      \/><br>      &lt;div class=\"center\">Centered&lt;\/div><br>    &lt;\/div><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Abajo a la derecha<\/h3>\n\n\n\n<p>El c\u00f3digo es el siguiente:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>  &lt;head><br>    &lt;style><br>      .container {<br>        position: relative;<br>      }<br><br>      .bottomright {<br>        position: absolute;<br>        bottom: 8px;<br>        right: 16px;<br>        font-size: 18px;<br>      }<br><br>      img {<br>        width: 100%;<br>        height: auto;<br>        opacity: 0.3;<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;h2>Image Text&lt;\/h2><br>    &lt;p>Add some text to an image in the bottom right corner:&lt;\/p><br><br>    &lt;div class=\"container\"><br>      &lt;img<br>        src=\"img_5terre_wide.jpg\"<br>        alt=\"Cinque Terre\"<br>        width=\"1000\"<br>        height=\"300\"<br>      \/><br>      &lt;div class=\"bottomright\">Bottom Right&lt;\/div><br>    &lt;\/div><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Abajo a la izquierda<\/h3>\n\n\n\n<p>El c\u00f3digo es el siguiente:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>  &lt;head><br>    &lt;style><br>      .container {<br>        position: relative;<br>      }<br><br>      .bottomleft {<br>        position: absolute;<br>        bottom: 8px;<br>        left: 16px;<br>        font-size: 18px;<br>      }<br><br>      img {<br>        width: 100%;<br>        height: auto;<br>        opacity: 0.3;<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;h2>Image Text&lt;\/h2><br>    &lt;p>Add some text to an image in the bottom left corner:&lt;\/p><br><br>    &lt;div class=\"container\"><br>      &lt;img<br>        src=\"img_5terre_wide.jpg\"<br>        alt=\"Cinque Terre\"<br>        width=\"1000\"<br>        height=\"300\"<br>      \/><br>      &lt;div class=\"bottomleft\">Bottom Left&lt;\/div><br>    &lt;\/div><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Resumen de propiedades<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>Propiedad<\/th><th>Descripci\u00f3n<\/th><\/tr><tr><td><strong><em>bottom<\/em><\/strong><\/td><td>Establece el borde del margen inferior para un cuadro posicionado<\/td><\/tr><tr><td><strong><em>clip<\/em><\/strong><\/td><td>Recorta un elemento absolutamente posicionado<\/td><\/tr><tr><td><strong><em>left<\/em><\/strong><\/td><td>Establece el borde del margen izquierdo para un cuadro posicionado<\/td><\/tr><tr><td><strong><em>position<\/em><\/strong><\/td><td>Especifica el tipo de posicionamiento para un elemento.<\/td><\/tr><tr><td><strong><em>right<\/em><\/strong><\/td><td>Establece el borde del margen derecho para un cuadro posicionado<\/td><\/tr><tr><td><strong><em>top<\/em><\/strong><\/td><td>Establece el borde del margen superior para un cuadro posicionado<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>La propiedad position especifica el tipo de m\u00e9todo de posicionamiento utilizado para un elemento (static, relative, fixed, absolute o sticky). [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":31,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1288","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"La propiedad position especifica el tipo de m\u00e9todo de posicionamiento utilizado para un elemento (static, relative, fixed, absolute o sticky). [&hellip;]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1288"}],"version-history":[{"count":3,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1288\/revisions"}],"predecessor-version":[{"id":1291,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1288\/revisions\/1291"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}