How to overlay one div over another div?

on

You can overlay one <div> over another <div> in HTML and CSS by using the CSS position property. To do this, you'll set the position of the overlaying <div> to absolute or fixed and use the z-index property to control the stacking order. Here's an example:

HTML:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Overlay Example</title>
</head>
<body>
    <div class="container">
        <div class="background"></div>
        <div class="overlay">
            <h1>Hello, I'm an overlay!</h1>
        </div>
    </div>
</body>
</html>

CSS (styles.css):

css
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.container {
    position: relative;
    width: 100%;
    height: 100vh;
}

.background {
    background-image: url('background.jpg'); /* Replace with your background image */
    background-size: cover;
    width: 100%;
    height: 100%;
}

.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
    color: white;
    padding: 20px;
    text-align: center;
    z-index: 1; /* Place the overlay above the background */
}

In this example:

  1. We have a container <div> that wraps both the background and overlay <div>s.

  2. The .background <div> holds the background image (you can replace 'background.jpg' with the path to your image) and covers the entire container using background-size: cover;.

  3. The .overlay <div> is positioned absolutely inside the container and centered both horizontally and vertically using position: absolute; and transform: translate(-50%, -50%);.

  4. We give the overlay a semi-transparent black background color using background-color: rgba(0, 0, 0, 0.7);.

  5. The z-index property is set to 1 for the overlay to place it above the background. You can adjust the z-index value as needed.

With this setup, the overlay <div> will appear on top of the background <div>, creating the overlay effect. You can further style the overlay content as desired.

 

Comments

Post a Comment