{"id":642,"date":"2020-07-03T19:24:26","date_gmt":"2020-07-03T22:24:26","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=642"},"modified":"2022-12-09T08:33:40","modified_gmt":"2022-12-09T11:33:40","slug":"layout-css-a-propriedade-position","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/","title":{"rendered":"Layout CSS &#8211; A propriedade position"},"content":{"rendered":"<p>A\u00a0<code>position<\/code>propriedade especifica o tipo de m\u00e9todo de posicionamento usado para um elemento (est\u00e1tico, relativo, fixo, absoluto ou fixo).<\/p>\n<p>&nbsp;<\/p>\n<p id=\"USCNPHD\"><img decoding=\"async\" loading=\"lazy\" width=\"693\" height=\"531\" class=\"alignnone size-full wp-image-643 \" src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/layout-css-a-propriedade-position-4.png\" alt=\"\" srcset=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/layout-css-a-propriedade-position-4.png 693w, https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/layout-css-a-propriedade-position-4-300x230.png 300w\" sizes=\"(max-width: 693px) 100vw, 693px\" \/><\/p>\n<hr \/>\n<h2>A posi\u00e7\u00e3o Property<\/h2>\n<p>A\u00a0<code>position<\/code>propriedade especifica o tipo de m\u00e9todo de posicionamento usado para um elemento.<\/p>\n<p>Existem cinco valores de posi\u00e7\u00e3o diferentes:<\/p>\n<ul>\n<li><code>static<\/code><\/li>\n<li><code>relative<\/code><\/li>\n<li><code>fixed<\/code><\/li>\n<li><code>absolute<\/code><\/li>\n<li><code>sticky<\/code><\/li>\n<\/ul>\n<p>Os elementos s\u00e3o posicionados usando as propriedades superior, inferior, esquerda e direita.\u00a0No entanto, essas propriedades n\u00e3o funcionar\u00e3o, a menos que a\u00a0<code>position<\/code>\u00a0propriedade seja definida primeiro.\u00a0Eles tamb\u00e9m funcionam de maneira diferente, dependendo do valor da posi\u00e7\u00e3o.<\/p>\n<hr \/>\n<h2>posi\u00e7\u00e3o: est\u00e1tica;<\/h2>\n<p>Os elementos HTML s\u00e3o posicionados est\u00e1ticos por padr\u00e3o.<\/p>\n<p>Elementos posicionados est\u00e1ticos n\u00e3o s\u00e3o afetados pelas propriedades superior, inferior, esquerda e direita.<\/p>\n<p>Um elemento com\u00a0<code>position: static;<\/code>n\u00e3o est\u00e1 posicionado de nenhuma maneira especial;\u00a0est\u00e1 sempre posicionado de acordo com o fluxo normal da p\u00e1gina:<\/p>\n<p>&nbsp;<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\ndiv.static {\r\n  position: static;\r\n  border: 3px solid #73AD21;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h2&gt;position: static;&lt;\/h2&gt;\r\n\r\n&lt;p&gt;An element with position: static; is not positioned in any special way; it is \r\nalways positioned according to the normal flow of the page:&lt;\/p&gt;\r\n\r\n&lt;div class=\"static\"&gt;\r\n  This div element has position: static;\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<center><input type=\"button\" name=\"Submit\" value=\"Testar c&oacute;digo\" onClick=\"document.getElementById('divcode').style.display='block';\" style=\"background-color:#FFCC05;border-radius:15px;padding:10px;width:150px;color:#000;\"><br><br><\/center>\n<p id=\"namkVXs\"><img decoding=\"async\" loading=\"lazy\" width=\"500\" height=\"289\" class=\"alignnone size-full wp-image-644 \" src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/layout-css-a-propriedade-position-3.png\" alt=\"\" srcset=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/layout-css-a-propriedade-position-3.png 500w, https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/layout-css-a-propriedade-position-3-300x173.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p><strong>posi\u00e7\u00e3o: relativa;<\/strong><\/p>\n<p>Um elemento com <code>position: relative;<\/code>\u00e9 posicionado em rela\u00e7\u00e3o \u00e0 sua posi\u00e7\u00e3o normal.<\/p>\n<p>Definir as propriedades superior, direita, inferior e esquerda de um elemento relativamente posicionado far\u00e1 com que ele seja ajustado para longe de sua posi\u00e7\u00e3o normal. Outro conte\u00fado n\u00e3o ser\u00e1 ajustado para caber em qualquer espa\u00e7o deixado pelo elemento.<\/p>\n<p id=\"IYDHRQD\"><img decoding=\"async\" loading=\"lazy\" width=\"1242\" height=\"76\" class=\"alignnone size-full wp-image-646 \" src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/layout-css-a-propriedade-position-1.png\" alt=\"\" srcset=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/layout-css-a-propriedade-position-1.png 1242w, https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/layout-css-a-propriedade-position-1-300x18.png 300w, https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/layout-css-a-propriedade-position-1-1024x63.png 1024w, https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/layout-css-a-propriedade-position-1-768x47.png 768w\" sizes=\"(max-width: 1242px) 100vw, 1242px\" \/><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\ndiv.relative {\r\n  position: relative;\r\n  left: 30px;\r\n  border: 3px solid #73AD21;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h2&gt;position: relative;&lt;\/h2&gt;\r\n\r\n&lt;p&gt;An element with position: relative; is positioned relative to its normal position:&lt;\/p&gt;\r\n\r\n&lt;div class=\"relative\"&gt;\r\nThis div element has position: relative;\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<center><input type=\"button\" name=\"Submit\" value=\"Testar c&oacute;digo\" onClick=\"document.getElementById('divcode').style.display='block';\" style=\"background-color:#FFCC05;border-radius:15px;padding:10px;width:150px;color:#000;\"><br><br><\/center>\n<p>&nbsp;<\/p>\n<p><strong>posi\u00e7\u00e3o: fixa;<\/strong><\/p>\n<p>Um elemento com <code>position: fixed;<\/code>\u00e9 posicionado em rela\u00e7\u00e3o \u00e0 janela de exibi\u00e7\u00e3o, o que significa que ele sempre permanece no mesmo local, mesmo que a p\u00e1gina seja rolada. As propriedades superior, direita, inferior e esquerda s\u00e3o usadas para posicionar o elemento.<\/p>\n<p>Um elemento fixo n\u00e3o deixa uma lacuna na p\u00e1gina onde normalmente estaria localizado.<\/p>\n<p>Observe o elemento fixo no canto inferior direito da p\u00e1gina. Aqui est\u00e1 o CSS usado:<\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" width=\"693\" height=\"531\" class=\"alignnone size-full wp-image-643 \" src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/layout-css-a-propriedade-position-4.png\" alt=\"\" srcset=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/layout-css-a-propriedade-position-4.png 693w, https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/layout-css-a-propriedade-position-4-300x230.png 300w\" sizes=\"(max-width: 693px) 100vw, 693px\" \/><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\ndiv.fixed {\r\n  position: fixed;\r\n  bottom: 0;\r\n  right: 0;\r\n  width: 300px;\r\n  border: 3px solid #73AD21;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h2&gt;position: fixed;&lt;\/h2&gt;\r\n\r\n&lt;p&gt;An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:&lt;\/p&gt;\r\n\r\n&lt;div class=\"fixed\"&gt;\r\nThis div element has position: fixed;\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<center><input type=\"button\" name=\"Submit\" value=\"Testar c&oacute;digo\" onClick=\"document.getElementById('divcode').style.display='block';\" style=\"background-color:#FFCC05;border-radius:15px;padding:10px;width:150px;color:#000;\"><br><br><\/center>\n<p>&nbsp;<\/p>\n<p><strong>posi\u00e7\u00e3o: absoluta;<\/strong><\/p>\n<p>Um elemento com <code>position: absolute;<\/code>\u00e9 posicionado em rela\u00e7\u00e3o ao ancestral posicionado mais pr\u00f3ximo (em vez de posicionado em rela\u00e7\u00e3o \u00e0 viewport, como fixo).<\/p>\n<p>Contudo; se um elemento posicionado absoluto n\u00e3o tiver ancestrais posicionados, ele usar\u00e1 o corpo do documento e se mover\u00e1 com a rolagem da p\u00e1gina.<\/p>\n<p>Nota: Um elemento &#8220;posicionado&#8221; \u00e9 aquele cuja posi\u00e7\u00e3o \u00e9 qualquer coisa, exceto static.<\/p>\n<p>Aqui est\u00e1 um exemplo simples:<\/p>\n<p id=\"GRpqaJi\"><img decoding=\"async\" loading=\"lazy\" width=\"627\" height=\"338\" class=\"alignnone size-full wp-image-647 \" src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/layout-css-a-propriedade-position.png\" alt=\"\" srcset=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/layout-css-a-propriedade-position.png 627w, https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/layout-css-a-propriedade-position-300x162.png 300w\" sizes=\"(max-width: 627px) 100vw, 627px\" \/><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\ndiv.relative {\r\n  position: relative;\r\n  width: 400px;\r\n  height: 200px;\r\n  border: 3px solid #73AD21;\r\n} \r\n\r\ndiv.absolute {\r\n  position: absolute;\r\n  top: 80px;\r\n  right: 0;\r\n  width: 200px;\r\n  height: 100px;\r\n  border: 3px solid #73AD21;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h2&gt;position: absolute;&lt;\/h2&gt;\r\n\r\n&lt;p&gt;An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):&lt;\/p&gt;\r\n\r\n&lt;div class=\"relative\"&gt;This div element has position: relative;\r\n  &lt;div class=\"absolute\"&gt;This div element has position: absolute;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<center><input type=\"button\" name=\"Submit\" value=\"Testar c&oacute;digo\" onClick=\"document.getElementById('divcode').style.display='block';\" style=\"background-color:#FFCC05;border-radius:15px;padding:10px;width:150px;color:#000;\"><br><br><\/center>\n<p>&nbsp;<\/p>\n<h2>posi\u00e7\u00e3o: pegajosa;<\/h2>\n<p>Um elemento com\u00a0<code>position: sticky;<\/code>\u00e9 posicionado com base na posi\u00e7\u00e3o de rolagem do usu\u00e1rio.<\/p>\n<p>Um elemento adesivo alterna entre\u00a0<code>relative<\/code>e\u00a0<code>fixed<\/code>, dependendo da posi\u00e7\u00e3o de rolagem.\u00a0\u00c9 posicionado em rela\u00e7\u00e3o at\u00e9 que uma determinada posi\u00e7\u00e3o de deslocamento seja alcan\u00e7ada na janela de visualiza\u00e7\u00e3o &#8211; ent\u00e3o &#8220;gruda&#8221; no lugar (como posi\u00e7\u00e3o: fixa).<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\ndiv.sticky {\r\n  position: -webkit-sticky;\r\n  position: sticky;\r\n  top: 0;\r\n  padding: 5px;\r\n  background-color: #cae8ca;\r\n  border: 2px solid #4CAF50;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;p&gt;Try to &lt;b&gt;scroll&lt;\/b&gt; inside this frame to understand how sticky positioning works.&lt;\/p&gt;\r\n&lt;p&gt;Note: IE\/Edge 15 and earlier versions do not support sticky position.&lt;\/p&gt;\r\n\r\n&lt;div class=\"sticky\"&gt;I am sticky!&lt;\/div&gt;\r\n\r\n&lt;div style=\"padding-bottom:2000px\"&gt;\r\n  &lt;p&gt;In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.&lt;\/p&gt;\r\n  &lt;p&gt;Scroll back up to remove the stickyness.&lt;\/p&gt;\r\n  &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;\/p&gt;\r\n  &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<center><input type=\"button\" name=\"Submit\" value=\"Testar c&oacute;digo\" onClick=\"document.getElementById('divcode').style.display='block';\" style=\"background-color:#FFCC05;border-radius:15px;padding:10px;width:150px;color:#000;\"><br><br><\/center>\n<p>&nbsp;<\/p>\n<div id=\"divcode\" style=\"display:none;z-index:200000001;padding:10px;border-radius:10px;background-color: #0054A1; position:fixed;top:100px;left: 50%;transform: translate(-50%, 0);\">\n  <font color=#fff>Ap\u00f3s clicar em Copy &#8663;<br>O c&oacute;digo fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n  <form name=\"codigo\" id=\"codigo\"  method=\"post\" action=\"https:\/\/www.joemaster.com.br\/codigos\/gerar_codigo.php\" target=\"_blank\"><textarea name=\"testarcodigo\" id=\"testarcodigo\"  cols=\"30\" rows=\"30\" wrap=\"VIRTUAL\"><\/textarea><\/form><input type=\"button\" name=\"Submit\" value=\"Testar\" onClick=\"if(document.getElementById('testarcodigo').value ==''){alert('Copie o c\u00f3digo conforme descrito acima!');}else{document.getElementById('codigo').submit();setTimeout(function(){document.getElementById('testarcodigo').value='';document.getElementById('divcode').style.display='none'; }, 1000);}\" style=\"background-color:#FFCC05;border-radius:15px;padding:5px;width:100px;color:#000;\">\n  <input type=\"button\" name=\"Submit\" value=\"Fechar\" onClick=\"document.getElementById('testarcodigo').value='';document.getElementById('divcode').style.display='none';\" style=\"background-color:#FFCC05;border-radius:15px;padding:5px;width:100px;color:#000;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>A\u00a0positionpropriedade especifica o tipo de m\u00e9todo de posicionamento usado para um elemento (est\u00e1tico, relativo, fixo, absoluto ou fixo). &nbsp; A posi\u00e7\u00e3o Property A\u00a0positionpropriedade especifica o tipo de m\u00e9todo de posicionamento usado para um elemento. Existem cinco valores de posi\u00e7\u00e3o diferentes: static relative fixed absolute sticky Os elementos s\u00e3o posicionados usando as propriedades superior, inferior, esquerda [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":74,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[118],"tags":[124,119,121,10,26,122,16,99,120,123,125],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Layout CSS - A propriedade position - JoeMaster<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Layout CSS - A propriedade position - JoeMaster\" \/>\n<meta property=\"og:description\" content=\"A\u00a0positionpropriedade especifica o tipo de m\u00e9todo de posicionamento usado para um elemento (est\u00e1tico, relativo, fixo, absoluto ou fixo). &nbsp; A posi\u00e7\u00e3o Property A\u00a0positionpropriedade especifica o tipo de m\u00e9todo de posicionamento usado para um elemento. Existem cinco valores de posi\u00e7\u00e3o diferentes: static relative fixed absolute sticky Os elementos s\u00e3o posicionados usando as propriedades superior, inferior, esquerda [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/\" \/>\n<meta property=\"og:site_name\" content=\"JoeMaster\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-03T22:24:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-09T11:33:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/img_5ef0e8127daaa.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"506\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"joemaster\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"joemaster\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/\"},\"author\":{\"name\":\"joemaster\",\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d\"},\"headline\":\"Layout CSS &#8211; A propriedade position\",\"datePublished\":\"2020-07-03T22:24:26+00:00\",\"dateModified\":\"2022-12-09T11:33:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/\"},\"wordCount\":422,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d\"},\"keywords\":[\"background\",\"cascata\",\"cores\",\"css\",\"estilo\",\"formata\u00e7\u00e3o\",\"html\",\"html5\",\"layout\",\"Style Sheets\",\"text\"],\"articleSection\":[\"curso css\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/\",\"url\":\"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/\",\"name\":\"Layout CSS - A propriedade position - JoeMaster\",\"isPartOf\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#website\"},\"datePublished\":\"2020-07-03T22:24:26+00:00\",\"dateModified\":\"2022-12-09T11:33:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.joemaster.com.br\/tutoriais\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Layout CSS &#8211; A propriedade position\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#website\",\"url\":\"https:\/\/www.joemaster.com.br\/tutoriais\/\",\"name\":\"JoeMaster\",\"description\":\"Tutoriais de WEB e APLICATIVOS EM HTML5, PHP, JS, CSS\",\"publisher\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.joemaster.com.br\/tutoriais\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d\",\"name\":\"joemaster\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2022\/05\/joemaster.jpg\",\"contentUrl\":\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2022\/05\/joemaster.jpg\",\"width\":1461,\"height\":281,\"caption\":\"joemaster\"},\"logo\":{\"@id\":\"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/joemaster.com.br\/tutoriais\"],\"url\":\"https:\/\/www.joemaster.com.br\/tutoriais\/author\/joemaster\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Layout CSS - A propriedade position - JoeMaster","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/","og_locale":"pt_BR","og_type":"article","og_title":"Layout CSS - A propriedade position - JoeMaster","og_description":"A\u00a0positionpropriedade especifica o tipo de m\u00e9todo de posicionamento usado para um elemento (est\u00e1tico, relativo, fixo, absoluto ou fixo). &nbsp; A posi\u00e7\u00e3o Property A\u00a0positionpropriedade especifica o tipo de m\u00e9todo de posicionamento usado para um elemento. Existem cinco valores de posi\u00e7\u00e3o diferentes: static relative fixed absolute sticky Os elementos s\u00e3o posicionados usando as propriedades superior, inferior, esquerda [&hellip;]","og_url":"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/","og_site_name":"JoeMaster","article_published_time":"2020-07-03T22:24:26+00:00","article_modified_time":"2022-12-09T11:33:40+00:00","og_image":[{"width":900,"height":506,"url":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/img_5ef0e8127daaa.jpg","type":"image\/jpeg"}],"author":"joemaster","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"joemaster","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/#article","isPartOf":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/"},"author":{"name":"joemaster","@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d"},"headline":"Layout CSS &#8211; A propriedade position","datePublished":"2020-07-03T22:24:26+00:00","dateModified":"2022-12-09T11:33:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/"},"wordCount":422,"commentCount":0,"publisher":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d"},"keywords":["background","cascata","cores","css","estilo","formata\u00e7\u00e3o","html","html5","layout","Style Sheets","text"],"articleSection":["curso css"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/","url":"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/","name":"Layout CSS - A propriedade position - JoeMaster","isPartOf":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#website"},"datePublished":"2020-07-03T22:24:26+00:00","dateModified":"2022-12-09T11:33:40+00:00","breadcrumb":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-a-propriedade-position\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.joemaster.com.br\/tutoriais\/"},{"@type":"ListItem","position":2,"name":"Layout CSS &#8211; A propriedade position"}]},{"@type":"WebSite","@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#website","url":"https:\/\/www.joemaster.com.br\/tutoriais\/","name":"JoeMaster","description":"Tutoriais de WEB e APLICATIVOS EM HTML5, PHP, JS, CSS","publisher":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.joemaster.com.br\/tutoriais\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":["Person","Organization"],"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/228e8f1dfe22da473e356f81c1033a9d","name":"joemaster","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/image\/","url":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2022\/05\/joemaster.jpg","contentUrl":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2022\/05\/joemaster.jpg","width":1461,"height":281,"caption":"joemaster"},"logo":{"@id":"https:\/\/www.joemaster.com.br\/tutoriais\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/joemaster.com.br\/tutoriais"],"url":"https:\/\/www.joemaster.com.br\/tutoriais\/author\/joemaster\/"}]}},"_links":{"self":[{"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/642"}],"collection":[{"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/comments?post=642"}],"version-history":[{"count":1,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/642\/revisions"}],"predecessor-version":[{"id":1152,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/642\/revisions\/1152"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/media\/74"}],"wp:attachment":[{"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/media?parent=642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/categories?post=642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.joemaster.com.br\/tutoriais\/wp-json\/wp\/v2\/tags?post=642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}