How To Overlay One Div Over Another - W3docs

Home » How To Overlay Two Divs » How To Overlay One Div Over Another - W3docs

Maybe your like

w3docs logo Books Learn HTML Learn CSS Learn Git Learn Javascript Learn PHP Learn python Learn Java Exercises HTML JavaScript Git CSS PHP Courses Quizzes Snippets Tools General Tools
  • Password Generator
  • HTML Editor
  • HTML Encoder
  • Base 64
  • Code Diff
  • JSON Beautifier
  • CSS Beautifier
  • Markdown Convertor
  • Find the Closest Tailwind CSS Color
  • Phrase encrypt / decrypt
  • Browser Feature Detection
  • Number convertor
  • JTW Decoder
CSS Maker
  • CSS Maker
  • CSS Maker text shadow
  • CSS Maker Text Rotation
  • CSS Maker Out Line
  • CSS Maker RGB Shadow
  • CSS Maker Transform
  • CSS Maker Font Face
Color Tools
  • Color Picker
  • Colors CMYK
  • Colors HWB
  • Colors HSL
  • Color Hex
  • Color mixer
  • Color Converter
  • Colors RGB
  • Color Contrast Analyzer
  • Color Gradient
String Tools
  • String Length Calculator
  • MD5 Hash Generator
  • Sha256 Hash Generator
  • String Reverse
  • URL Encoder
  • URL Decoder
  • Base 64 Encoder
  • Base 64 Decoder
  • Extra Spaces Remover
  • String to Lowercase
  • String to Uppercase
  • Word Count Calculator
  • Empty Lines Remover
  • HTML Tags Remover
  • Binary to Hex
  • Hex to Binary
  • Rot13 Transform on a String
  • String to Binary
  • Duplicate Lines Remover
Change theme
  • Dark
  • Light
  • System
  • Books
    • Learn HTML
    • Learn CSS
    • Learn Git
    • Learn Javascript
    • Learn PHP
    • Learn python
    • Learn Java
  • How To
    • How To NodeJs
    • How To Linux
    • How To AngularJs
    • How To PHP
    • How To HTML
    • How To CSS
    • How To Symfony
    • How To Git
    • How To Apache
    • How To JavaScript
    • How To Java
    • How To Vue.js
    • How To Python
  1. Snippets
  2. HTML
  3. How to Overlay One Div Over Another
How to Overlay One Div Over Another

Creating an overlay effect for two <div> elements can be easily done with CSS. This can be done with the combination of the CSS position and z-index properties. The z-index of an element defines its order inside a stacking context. In our examples, we’ll use the “absolute” and “relative” values of the position property and add the z-index property to specify the stacking order for the positioned elements.

So, let’s start!

Create HTML

  • Use a <div> element with the class named “container”.
  • Add two other <div> elements within the first one. Add classes to them as well.
<div class="container"> <div class="box"></div> <div class="box overlay"></div> </div>

Add CSS

  • Specify the width and height of the "container" class. Set the position to "relative" and add the margin property.
  • Set both the width and height of the "box" class to "100%". Specify the position with the "absolute" value. Add the top and left properties. Also, specify the background and opacity of the "box" class.
  • Style the "overlay" class by using the z-index, margin and background properties.
.container { width: 150px; height: 150px; position: relative; margin: 30px; } .box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.7; background: #0057e3; } .overlay { z-index: 9; margin: 30px; background: #009938; }

Now, we can bring together the parts of our code.

Example of overlaying one <div> over another:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .container { width: 150px; height: 150px; position: relative; margin: 30px; } .box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.7; background: #0057e3; } .overlay { z-index: 9; margin: 30px; background: #009938; } </style> </head> <body> <div class="container"> <div class="box"></div> <div class="box overlay"></div> </div> </body> </html> Try it Yourself »

Result

Let’s see another example where we use a bit more CSS. Here, we add some hovering effects using the CSS :hover pseudo-class.

Example of overlaying one <div> over another with hovering effects:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .container { position: absolute; height: 250px; width: 400px; background-color: #7d807e; } .box1 { color: #fff; padding-top: 60px; padding-left: 50px; font-size: 50px; font-weight: bold; } .box2 { padding-left: 50px; } .box1:hover { z-index: -1; opacity: 0.5; font-size: 30px; text-align: center; transform-style: all; transition-duration: 2s; } .box2:hover { z-index: -1; opacity: 0.3; font-size: 40px; text-align: center; transform-style: all; transition-duration: 2s; } </style> </head> <body> <div class="container"> <div class="box1">W3Docs</div> <div class="box2">Learn programming</div> </div> </body> </html> Try it Yourself » Tags html css div overlay position

Related Resources

  • How to Horizontally Center a <div> in Another <div>
  • How to Make an HTML <div> Element not Larger Than its Content
  • How to Align the Content of a Div Element to the Bottom
  • How to Horizontally Center a Div with CSS
  • How to Vertically Center a <div>
  • How to Vertically Align Elements in a Div
  • How to Center a Button Both Horizontally and Vertically within a Div
Sorry about that How can we improve it? Submit Thanks for your feedback! Thanks for your feedback! Do you find this helpful? Yes No Quizzes
  • PHP basics
  • HTML Basics
  • Javascript Basics
  • CSS Basics
  • ES6 Basics
  • TypeScript Basics
  • React Basics
  • Angular Basics
  • Sass Basics
  • Git Basics
  • Vue.js Basics
  • SQL Basics
  • Python Basics
  • Java Basics
  • NodeJS Basics

Tag » How To Overlay Two Divs