In web design, there are lots of cases where you will need to stack <div> elements on top of each other in order to achieve certain effects or layouts. One example of this is a progress bar, where you have a background color, a foreground color (to mark the progress), and maybe a label.<\/p>\n
The trick to stacking divs is to make a container div with a <\/p>\n HTML<\/strong><\/p>\n CSS<\/strong><\/p>\n Here is what it looks like so far on Codepen:<\/p>\n \nSee the Pen CSS stacked divs \u2013 Step 1 by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n <\/p>\n Notes: <\/p>\n Create a new div that will sit on top of the container div. This div will show the progress via a different background color. The percentage width indicates the percentage complete. This div should have position: absolute; and have a z-index which will elevate it above the background container. Position absolute in this case means absolute in relationship to the container div.<\/p>\n HTML<\/strong><\/p>\n CSS<\/strong><\/p>\n \nSee the Pen CSS stacked divs \u2013 Step 2 by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n <\/p>\n Just like the previous step, create another div that will sit on top of the container div and make this one position: absolute also!<\/p>\n HTML<\/strong><\/p>\n CSS<\/strong><\/p>\n And the final result looks like this:<\/p>\n \nSee the Pen CSS stacked divs \u2013 Step 3 by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" In web design, there are lots of cases where you will need to stack <div> elements on top of each other in order to achieve certain effects or layouts. One example of this is a progress bar, where you have a background color, a foreground color (to mark the progress), and maybe a label. The … Continue reading HTML & CSS: How to create a progress bar with stacked divs<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[10,105],"class_list":["post-1755","post","type-post","status-publish","format-standard","hentry","category-html-css","tag-css","tag-html"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1755","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1755"}],"version-history":[{"count":10,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1755\/revisions"}],"predecessor-version":[{"id":1765,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1755\/revisions\/1765"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1755"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1755"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1755"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}position: relative;<\/code> and give the stacked divs position: absolute;<\/code>. The stacked divs can also benefit from having a z-index.<\/p>\nStep 1: Create the container div<\/strong><\/h4>\n
<div class=\"container-div\">\r\n<\/div>\r\n<\/pre>\n
.container-div {\r\n width: 90%;\r\n height: 48px;\r\n align: center;\r\n background-color: #deedf4;\r\n border-radius: 10px;\r\n text-align: center;\r\n vertical-align: middle;\r\n position: relative;\r\n}<\/pre>\n
\nThis container contains the background color for the progress bar and stretches 100%. The trick is to give this container a position: relative;<\/p>\nStep 2: Create the first stacked div
\n<\/strong><\/h4>\n<div class=\"container-div\">\r\n <div class=\"percent-bar\"><\/div>\r\n<\/div>\r\n<\/pre>\n
.percent-bar {\r\n width: 30%;\r\n height: 48px;\r\n background-color: #59A3C8;\r\n border-radius: 10px;\r\n position: absolute;\r\n z-index: 2;\r\n}<\/pre>\nStep 3:\u00a0Create\u00a0the second stacked div<\/strong><\/h4>\n
<div class=\"container-div\">\r\n <div class=\"percent-bar\"><\/div>\r\n \r\n <div class=\"status-bar-text\">\r\n <h3>30%<\/h3>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\n
.status-bar-text {\r\n width: 100%;\r\n height: 48px;\r\n position: absolute;\r\n}\r\n\r\nh3 {\r\n text-align: right;\r\n margin: 0px;\r\n padding-top: 10px;\r\n padding-right: 12px;\r\n}<\/pre>\n