{"id":15116,"date":"2023-12-22T16:03:45","date_gmt":"2023-12-22T19:03:45","guid":{"rendered":"https:\/\/categoriaoutros.com.br\/?p=15116"},"modified":"2023-12-22T16:03:48","modified_gmt":"2023-12-22T19:03:48","slug":"bootstrap-colocar-div-para-aparecer-em-cima-de-todas-as-outras","status":"publish","type":"post","link":"https:\/\/categoriaoutros.com.br\/?p=15116","title":{"rendered":"Bootstrap: Colocar Div para Aparecer em cima de todas as outras"},"content":{"rendered":"\n<p>Usando Bootstrap, veja como colocar uma div para aparecer em cima de todas as outras, de forma sobreposta \u00e0s demais em sua p\u00e1gina HTML.<\/p>\n\n\n\n<p>Se voc\u00ea deseja criar uma div sobrepondo todas as demais e no centro da p\u00e1gina usando Bootstrap, pode usar a classe <strong>position-absolute <\/strong>junto com a classe <strong>fixed-top <\/strong>para garantir que a div permane\u00e7a no centro, independentemente da rolagem da p\u00e1gina. <\/p>\n\n\n\n<p>Podemos tamb\u00e9m usar a classe <strong>text-center<\/strong> do Bootstrap para centralizar o conte\u00fado dentro da div. <\/p>\n\n\n\n<p>Veja essa div como exemplo,<\/p>\n\n\n\n<pre>\n\n<font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;alert alert-danger alert-dismissible fade show   m-5 position-absolute&quot;<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">id<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;resultado&quot;<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">style<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;display: none; z-index: 1000;&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">button<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">type<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;button&quot;<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;btn-close&quot;<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">data<\/font><font color=\"#00CDCD\">-bs-dismiss=<\/font><font color=\"#CD0000\">&quot;alert&quot;<\/font><font color=\"#00CDCD\">&gt;&lt;\/<\/font><font color=\"#AF5F00\">button<\/font><font color=\"#00CDCD\">&gt;<\/font>\n        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font><b>Alerta!<\/b><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font> Isso \u00e9 um alerta animado com cor prim\u00e1ria.\n<font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n<\/pre>\n\n\n\n<p>Nesse momento, ignore todo o restante das op\u00e7\u00f5es dentro da div e foque apenas em <strong>position-absolute<\/strong> e <strong>z-index: 1000<\/strong>.  Apenas esses dois elementos s\u00e3o suficientes para voc\u00ea ter uma div sobrepondo todas as demais.<\/p>\n\n\n\n<p>Agora, se voc\u00ea deseja ajustar a posi\u00e7\u00e3o da div, poder\u00e1 acrescentar dentro de <strong>class=&#8221;&#8230;&#8221;<\/strong> os seguintes itens:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>top-50<\/strong> e <strong>start-50 <\/strong>que correspondem ao ponto m\u00e9dio superior e \u00e0 extremidade esquerda<\/li>\n\n\n\n<li><strong>translate-middle<\/strong> que \u00e9 usada para centralizar vertical e horizontalmente a <code>div<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>Veja mais posts sobre <a href=\"https:\/\/categoriaoutros.com.br\/?s=HTML\">HTML<\/a> e <a href=\"https:\/\/categoriaoutros.com.br\/?s=bootstrap\">Bootstrap<\/a> clicando nesses links.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Usando Bootstrap, veja como colocar uma div para aparecer em cima de todas as outras, de forma sobreposta \u00e0s demais em sua p\u00e1gina HTML. Se voc\u00ea deseja criar uma div sobrepondo todas as demais e no centro da p\u00e1gina usando Bootstrap, pode usar a classe position-absolute junto com a classe fixed-top para garantir que a&#8230;<\/p>\n<p class=\"more-link-wrap\"><a href=\"https:\/\/categoriaoutros.com.br\/?p=15116\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> &ldquo;Bootstrap: Colocar Div para Aparecer em cima de todas as outras&rdquo;<\/span> &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4702],"tags":[4699,4753,670,4754],"class_list":["post-15116","post","type-post","status-publish","format-standard","hentry","category-bootstrap","tag-bootstrap","tag-div","tag-html","tag-position-absolute"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bootstrap: Colocar Div para Aparecer em cima de todas as outras - Categoria Outros<\/title>\n<meta name=\"description\" content=\"Usando Bootstrap, veja como colocar uma div para aparecer em cima de todas as outras, de forma sobreposta \u00e0s demais em sua p\u00e1gina HTML.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/categoriaoutros.com.br\/?p=15116\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap: Colocar Div para Aparecer em cima de todas as outras - Categoria Outros\" \/>\n<meta property=\"og:description\" content=\"Usando Bootstrap, veja como colocar uma div para aparecer em cima de todas as outras, de forma sobreposta \u00e0s demais em sua p\u00e1gina HTML.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/categoriaoutros.com.br\/?p=15116\" \/>\n<meta property=\"og:site_name\" content=\"Categoria Outros\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/categoriaoutros\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-22T19:03:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-22T19:03:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/pinguim-paginas-padrao.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1022\" \/>\n\t<meta property=\"og:image:height\" content=\"722\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Categoria: Outros\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CategoriaOutros\" \/>\n<meta name=\"twitter:site\" content=\"@CategoriaOutros\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Categoria: Outros\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15116#article\",\"isPartOf\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15116\"},\"author\":{\"name\":\"Categoria: Outros\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40\"},\"headline\":\"Bootstrap: Colocar Div para Aparecer em cima de todas as outras\",\"datePublished\":\"2023-12-22T19:03:45+00:00\",\"dateModified\":\"2023-12-22T19:03:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15116\"},\"wordCount\":186,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\"},\"keywords\":[\"Bootstrap\",\"div\",\"html\",\"position-absolute\"],\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/categoriaoutros.com.br\/?p=15116#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15116\",\"url\":\"https:\/\/categoriaoutros.com.br\/?p=15116\",\"name\":\"Bootstrap: Colocar Div para Aparecer em cima de todas as outras - Categoria Outros\",\"isPartOf\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#website\"},\"datePublished\":\"2023-12-22T19:03:45+00:00\",\"dateModified\":\"2023-12-22T19:03:48+00:00\",\"description\":\"Usando Bootstrap, veja como colocar uma div para aparecer em cima de todas as outras, de forma sobreposta \u00e0s demais em sua p\u00e1gina HTML.\",\"breadcrumb\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15116#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/categoriaoutros.com.br\/?p=15116\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15116#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/categoriaoutros.com.br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap: Colocar Div para Aparecer em cima de todas as outras\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#website\",\"url\":\"https:\/\/categoriaoutros.com.br\/\",\"name\":\"Categoria Outros\",\"description\":\"Assuntos Diversos\",\"publisher\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/categoriaoutros.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\",\"name\":\"Categoria Outros\",\"alternateName\":\"Categoria Outros\",\"url\":\"https:\/\/categoriaoutros.com.br\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg\",\"contentUrl\":\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg\",\"width\":400,\"height\":400,\"caption\":\"Categoria Outros\"},\"image\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/categoriaoutros\",\"https:\/\/twitter.com\/CategoriaOutros\",\"https:\/\/br.pinterest.com\/CategoriaOutros\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40\",\"name\":\"Categoria: Outros\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g\",\"caption\":\"Categoria: Outros\"},\"sameAs\":[\"http:\/\/categoriaoutros.com.br\"],\"url\":\"https:\/\/categoriaoutros.com.br\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap: Colocar Div para Aparecer em cima de todas as outras - Categoria Outros","description":"Usando Bootstrap, veja como colocar uma div para aparecer em cima de todas as outras, de forma sobreposta \u00e0s demais em sua p\u00e1gina HTML.","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:\/\/categoriaoutros.com.br\/?p=15116","og_locale":"pt_BR","og_type":"article","og_title":"Bootstrap: Colocar Div para Aparecer em cima de todas as outras - Categoria Outros","og_description":"Usando Bootstrap, veja como colocar uma div para aparecer em cima de todas as outras, de forma sobreposta \u00e0s demais em sua p\u00e1gina HTML.","og_url":"https:\/\/categoriaoutros.com.br\/?p=15116","og_site_name":"Categoria Outros","article_publisher":"https:\/\/www.facebook.com\/categoriaoutros","article_published_time":"2023-12-22T19:03:45+00:00","article_modified_time":"2023-12-22T19:03:48+00:00","og_image":[{"width":1022,"height":722,"url":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/pinguim-paginas-padrao.webp","type":"image\/webp"}],"author":"Categoria: Outros","twitter_card":"summary_large_image","twitter_creator":"@CategoriaOutros","twitter_site":"@CategoriaOutros","twitter_misc":{"Escrito por":"Categoria: Outros","Est. tempo de leitura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/categoriaoutros.com.br\/?p=15116#article","isPartOf":{"@id":"https:\/\/categoriaoutros.com.br\/?p=15116"},"author":{"name":"Categoria: Outros","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40"},"headline":"Bootstrap: Colocar Div para Aparecer em cima de todas as outras","datePublished":"2023-12-22T19:03:45+00:00","dateModified":"2023-12-22T19:03:48+00:00","mainEntityOfPage":{"@id":"https:\/\/categoriaoutros.com.br\/?p=15116"},"wordCount":186,"commentCount":0,"publisher":{"@id":"https:\/\/categoriaoutros.com.br\/#organization"},"keywords":["Bootstrap","div","html","position-absolute"],"articleSection":["Bootstrap"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/categoriaoutros.com.br\/?p=15116#respond"]}]},{"@type":"WebPage","@id":"https:\/\/categoriaoutros.com.br\/?p=15116","url":"https:\/\/categoriaoutros.com.br\/?p=15116","name":"Bootstrap: Colocar Div para Aparecer em cima de todas as outras - Categoria Outros","isPartOf":{"@id":"https:\/\/categoriaoutros.com.br\/#website"},"datePublished":"2023-12-22T19:03:45+00:00","dateModified":"2023-12-22T19:03:48+00:00","description":"Usando Bootstrap, veja como colocar uma div para aparecer em cima de todas as outras, de forma sobreposta \u00e0s demais em sua p\u00e1gina HTML.","breadcrumb":{"@id":"https:\/\/categoriaoutros.com.br\/?p=15116#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/categoriaoutros.com.br\/?p=15116"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/categoriaoutros.com.br\/?p=15116#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/categoriaoutros.com.br\/"},{"@type":"ListItem","position":2,"name":"Bootstrap: Colocar Div para Aparecer em cima de todas as outras"}]},{"@type":"WebSite","@id":"https:\/\/categoriaoutros.com.br\/#website","url":"https:\/\/categoriaoutros.com.br\/","name":"Categoria Outros","description":"Assuntos Diversos","publisher":{"@id":"https:\/\/categoriaoutros.com.br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/categoriaoutros.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/categoriaoutros.com.br\/#organization","name":"Categoria Outros","alternateName":"Categoria Outros","url":"https:\/\/categoriaoutros.com.br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/","url":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg","contentUrl":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg","width":400,"height":400,"caption":"Categoria Outros"},"image":{"@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/categoriaoutros","https:\/\/twitter.com\/CategoriaOutros","https:\/\/br.pinterest.com\/CategoriaOutros\/"]},{"@type":"Person","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40","name":"Categoria: Outros","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g","caption":"Categoria: Outros"},"sameAs":["http:\/\/categoriaoutros.com.br"],"url":"https:\/\/categoriaoutros.com.br\/?author=1"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/15116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15116"}],"version-history":[{"count":3,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/15116\/revisions"}],"predecessor-version":[{"id":15119,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/15116\/revisions\/15119"}],"wp:attachment":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}