To overlap or layer HTML elements:<\/p>\n
- \n
- Set the position of the elements to
relative<\/code>,absolute<\/code>, orfixed<\/code>.<\/li>\n- Then, use
z-index<\/code> to specify which element is on top or below.<\/li>\n<\/ol>\nFor example:<\/p>\n
- \n
<div id=\"top\">TOP<\/div> <div id=\"bottom\">BOTTOM<\/div><\/code><\/li>\n#top, #bottom { position:fixed; top:0; left:0 }<\/code><\/li>\n#top { z-index:9; } #bottom { z-index:8; }<\/code><\/li>\n<\/ul>\n<\/div>\nBut just how exactly does this work? Let us walk through a couple of examples in this guide – Read on!<\/p>\n
\u24d8 I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.<\/p>\n
<\/p>\n
<\/div>\n<\/p>\n
TLDR – QUICK SLIDES<\/h2>\n
[web_stories_embed url=”https:\/\/code-boxx.com\/web-stories\/how-to-overlap-html-elements\/” title=”How To Overlap HTML Elements” poster=”https:\/\/code-boxx.com\/wp-content\/uploads\/2022\/03\/STORY-HTML-20230505.webp” width=”360″ height=”600″ align=”center”]<\/p>\n
Fullscreen Mode – Click Here<\/a><\/p>\n
<\/p>\n
TABLE OF CONTENTS<\/h2>\n
\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-download.svg\")
Download & Notes<\/a><\/div>\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-grid.svg\")
Overlap HTML Elements<\/a><\/div>\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-gear.svg\")
More Examples<\/a><\/div>\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-plus-square.svg\")
Extra Bits & Links<\/a><\/div>\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-thumbs-up.svg\")
The End<\/a><\/div>\n<\/div>\n<\/p>\n
<\/div>\n<\/p>\n
\nDOWNLOAD & NOTES<\/h2>\n
<\/p>\nFirstly, here is the download link to the example code as promised.<\/p>\n<\/div>\n
<\/p>\n
QUICK NOTES<\/span><\/h3>\nIf you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world\u2026 If you need answers urgently, please check out my list of websites to get help with programming<\/a>.\n
<\/p>\n
EXAMPLE CODE DOWNLOAD<\/span><\/h3>\n
Click here to download<\/a> the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.<\/p>\n
<\/p>\n
\nOVERLAPPING HTML ELEMENTS<\/h2>\n
<\/p>\nAll right, let us now get into more details on how overlapping elements work in HTML and CSS.<\/p>\n<\/div>\n
<\/p>\n
PART 1) POSITION & Z-INDEX<\/span><\/h3>\n
1A) CSS POSITION<\/span><\/h4>\n
1a-position.html<\/div>\n<style>\r\n#demoA { \r\n position: static; \r\n background: lightsalmon;\r\n}\r\n#demoB { \r\n position: relative; \r\n top: 60px; left: 5px; \r\n background: lightgreen;\r\n}\r\n#demoC { \r\n position: absolute; \r\n bottom: 5px; right: 5px; \r\n background: lightblue;\r\n}\r\n#demoD { \r\n position: fixed; \r\n top: 50%; left: 50%; \r\n background: lightgoldenrodyellow;\r\n}\r\n#demoE {\r\n position: sticky;\r\n top: 0; left: 0;\r\n background: lavender;\r\n}\r\n<\/style>\r\n \r\n<div id=\"demoA\">STATIC<\/div>\r\n<div id=\"demoB\">RELATIVE<\/div>\r\n<div id=\"demoC\">ABSOLUTE<\/div>\r\n<div id=\"demoD\">FIXED<\/div>\r\n<div id=\"demoE\">STICKY<\/div><\/code><\/pre>\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2022\/01\/html-overlap-1b.png\")
<\/p>\nAll right, let us now start with “step one” of creating overlapping elements – By positioning elements. In CSS, there are a couple of ways to position an element:<\/p>\n
- \n
- Static<\/strong> – This is the default “as-it-is” positioning for every element; The element will simply go along with the “normal page flow”.<\/li>\n
- Relative<\/strong> – The element will be “displaced” from its static position, we use
top bottom left right<\/code>\u00a0to define how much to offset the element.<\/li>\n- Absolute<\/strong> – The element will be positioned with reference to an ancestor that is not
position: static<\/code>; Will be positioned with reference to<body><\/code> if all ancestors areposition: static<\/code>.<\/li>\n- Fixed<\/strong> – The element will be fixed on the screen and cannot be “scrolled away”.<\/li>\n
- Sticky<\/strong> – An interesting one, the element acts like
position: static<\/code> by default. But as it scrolls out of the screen, it turns intoposition: fixed<\/code> instead.<\/li>\n<\/ul>\nIn summary –
relative absolute fixed sticky<\/code> will “disrupt” HTML elements from their “usual layout”, and we can control it usingtop bottom left right<\/code>. Overlapping happens when we position one element over another.<\/p>\n<\/p>\n
<\/div>\n<\/p>\n
1B) <\/span>Z-INDEX <\/span>LAYERING ORDER\u00a0<\/span><\/h4>\n
1b-zindex.html<\/div>\n<style>\r\n#demoA, #demoB, #demoC { \r\n position: fixed; \r\n top: 10px;\r\n padding: 10px;\r\n}\r\n#demoA {\r\n left: 5px; \r\n background: lightpink;\r\n z-index: 1;\r\n}\r\n#demoB {\r\n left: 70px; \r\n background: lightgreen;\r\n z-index: 9;\r\n}\r\n#demoC {\r\n left: 40px; \r\n background: lightblue;\r\n z-index: 5;\r\n}\r\n<\/style>\r\n \r\n<div id=\"demoA\">BOTTOM<\/div>\r\n<div id=\"demoB\">TOP<\/div>\r\n<div id=\"demoC\">MIDDLE<\/div><\/code><\/pre>\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2022\/01\/html-overlap-2b.png\")
<\/p>\nNow,
position<\/code> should be straightforward enough, and here comes the “next easy” – How do we determine which element is on top, which is below when they are layered? Introducingz-index<\/code>, which is simply an arbitrary number that you assign. The higher thez-index<\/code>, the more priority it has to be on top. That simple.<\/p>\n<\/p>\n
PART 2) SET THE WIDTH & HEIGHT<\/span><\/h3>\n
2a-dimensions.html<\/div>\n<style>\r\n\/* (A) FIXED POSITION *\/\r\n#demoA, #demoB, #demoC {\r\n position: fixed;\r\n display: block;\r\n}\r\n\/* (B) EXACT PIXELS *\/\r\n#demoA {\r\n top: 0; left: 0;\r\n width: 100px;\r\n height: 50px;\r\n background: #ffcdc9;\r\n}\r\n\/* (C) PERCENTAGE DIMENSIONS *\/\r\n#demoB {\r\n bottom: 0; left: 0;\r\n width: 100%;\r\n height: 15%;\r\n background: #d5ffc9;\r\n text-align: center;\r\n}\r\n\/* (D) RELATIVE TO VIEWPORT *\/\r\n#demoC {\r\n top: 0; right: 0;\r\n width: 50vw;\r\n height: 15vh;\r\n background: #c9cdff;\r\n text-align: center;\r\n}\r\n<\/style>\r\n\r\n<div id=\"demoA\">Fixed Size Overlay.<\/div>\r\n<div id=\"demoB\">Percentage Size Overlay.<\/div>\r\n<div id=\"demoC\">Viewport Size Overlay.<\/div><\/code><\/pre>\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2022\/01\/html-overlap-3b.png\")
<\/p>\nNeed to set the dimensions of an overlay? Well, there are a lot of confusing measurement units in CSS, but here are a few common ones to know:<\/p>\n
- \n
px<\/code> Pixels, good for specifying an exact size for an overlay with an image or video.<\/li>\n%<\/code> Percentage, one that I will recommend using with today’s responsive design and to better support mobile screens. But take note, the percentage is calculated based on the parent container. E.G. If we have a parent<div><\/code> that has300px<\/code> width, and a child<button><\/code> inside with50%<\/code> width – That will translate to a button with150px<\/code> wide.<\/li>\nvw<\/code> for the percentage of the viewport width, andvh<\/code> for the viewport height. This one takes the width and height of the screen instead of the parent container – A very useful unit to use forfixed<\/code> elements.<\/li>\n<\/ul>\nThat should be good enough in most cases. But if you want to know more sizing units, I will leave a link in the extras section below to another tutorial.<\/p>\n
<\/p>\n
<\/div>\n<\/p>\n
\nMORE EXAMPLES<\/h2>\n
<\/p>\nWith all of the above, you should be able to create overlapping elements well enough. But here are a few more common examples of using layered elements.<\/p>\n<\/div>\n
<\/p>\n
CATFISH WITH STICKY POSITION<\/span><\/h3>\n
3a-catfish.html<\/div>\n<style>\r\n#catfish {\r\n position: sticky;\r\n bottom: 0; left: 0;\r\n width: 100%; padding: 30px 10px;\r\n color: white; background: rgba(0, 0, 0, 0.5);\r\n text-align: center;\r\n}\r\n<\/style>\r\n\r\n<header>MY SITE<\/header>\r\n<main>Main Contents<\/main>\r\n<footer>Copyright My Site<\/footer>\r\n<div id=\"catfish\">This can be a bottom navigation bar or important message.<\/div><\/code><\/pre>\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2020\/12\/html-overlay-4.png\")
<\/p>\nA catfish stays at the bottom, the HTML counterpart does the same too. Very easy to create – Just give it
position: sticky; bottom 0; width: 100%;<\/code> and done. Take note, we define a transparent background color usingrgba(RED, GREEN, BLUE, OPACITY)<\/code>.<\/p>\n<\/p>\n
<\/div>\n<\/p>\n
CENTERED OVERLAY<\/span><\/h3>\n
3b-center.html<\/div>\n<style>\r\n\/* (A) FULL SCREEN BACKGROUND *\/\r\n#overA {\r\n position: fixed; top: 0; left: 0; z-index: 999;\r\n width: 100vw; height: 100vh;\r\n background: rgba(0, 0, 0, 0.5);\r\n}\r\n\/* (B) CENTERED ON SCREEN *\/\r\n#overB {\r\n position: absolute; top: 50%; left: 50%;\r\n \/* \"COUNTER\" WIDTH & HEIGHT OF BOX TO \"TRULY CENTER\" ON SCREEN *\/\r\n transform: translate(-50%, -50%);\r\n color: #fff; background: #000;\r\n padding: 10px;\r\n text-align: center;\r\n}\r\n<\/style>\r\n\r\n<main>Just some random contents<\/main>\r\n<div id=\"overA\">\r\n <div id=\"overB\">This can be a loading screen or dialog box.<\/div>\r\n<\/div><\/code><\/pre>\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2020\/12\/html-overlay-5.png\")
<\/p>\nCentering an element can be a little trickier, but still can be done… This one will probably need the help of some Javascript to toggle show\/hide the
#overA<\/code>\u00a0though –document.getElementById(\"overA\").style.display = \"none\"<\/code> ordocument.getElementById(\"overA\").style.display = \"block\"<\/code>.<\/p>\n<\/p>\n
<\/div>\n<\/p>\n
\nEXTRA BITS & LINKS<\/h2>\n
<\/p>\nThat’s all for this guide, and here is a small section on some extras and links that may be useful to you.<\/p>\n<\/div>\n
<\/p>\n
LINKS & REFERENCES<\/span><\/h3>\n
- \n
- Position<\/a> – CSS Tricks<\/li>\n
- CSS values and units – Learn web development<\/a> – MDN<\/li>\n
- Z-Index<\/a> – MDN<\/li>\n<\/ul>\n
<\/p>\n
INFOGRAPHIC CHEAT SHEET<\/span><\/h3>\n
![\"\"](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2022\/01\/HTML-overlap-20230214-sm-R0.webp\")
<\/a>How to Create Overlapping HTML Elements (Click to enlarge)<\/span><\/figcaption><\/figure>\n <\/p>\n
\nTHE END<\/h2>\n
<\/p>\nThank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Welcome to a tutorial on how to overlap or layer HTML elements. So you want to create your own overlapping elements? Maybe a customized popup dialog box, a “now loading” screen, or an overlay menu. To overlap or layer HTML elements: Set the position of the elements to relative, absolute, or fixed. Then, use z-index […]<\/p>\n","protected":false},"author":1,"featured_media":17487,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","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":"","theme-transparent-header-meta":"default","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":"","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":""},"categories":[18],"tags":[],"class_list":["post-4036","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css"],"_links":{"self":[{"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/posts\/4036"}],"collection":[{"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/comments?post=4036"}],"version-history":[{"count":0,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/posts\/4036\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/media\/17487"}],"wp:attachment":[{"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/media?parent=4036"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/categories?post=4036"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/tags?post=4036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- CSS values and units – Learn web development<\/a> – MDN<\/li>\n
- Relative<\/strong> – The element will be “displaced” from its static position, we use
- Then, use