What is the best way to stack three div elements on top of each other?

In the following code snippet, there is a parent div with the class "cont" which contains three child elements: 1. The first child is a video with the class "vid". 2. The second child is a mask with the class "maskHeaderajans". This acts as a layer mask or filter on the video and should overlay the entire video. 3. The third child is a section named "main-caption" which includes a logo and some text. It should stick to the second child (the mask that overlays the video).

  <div id="cont" style="max-height:760px;">
      <div class='vid header'>
          <video autoplay muted loop id="myVideo">
              <source src="img/atur.shiraz-20181117-0001.mp4" type="video/mp4">
          </video>
      </div>
          <!--<div class="maskHeader" style="background: url(img/3px-tile.png);"></div>-->
    <div class="maskHeaderajans"></div>
          <div class="main-caption">
              <div class="logo">
                  <!--<img src="img/jk.png" alt="logo" />-->
              </div>
              <div>
                  <ul class="slides" style="margin-top: 50px;">
                      <li>
                          <h1 class="white" id="ajansname">AJANS ORDI</h1>
                          <h2 class="white">PER SAFAR, PER TAJROBE</h2>
                      </li>


                  </ul>
              </div>
              <!-- end slider -->

          </div><!--  end main caption -->

      </div>
htmlcss

Answer №1

I have updated your layout by making a few changes. The .main-caption element has been relocated into .maskHeaderajans. Please refer to the code snippet below for the modifications.

    <style>
.cont{
    position:relative;
    display:block;
    max-height:760px;
}
.vid.header{
    display:inline-block;
    position:relative;
    z-index:0;
}
.maskHeaderajans{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;


}
.main-caption{
    position:relative;
    display:block;
    width:50%;
    margin:0 auto;

}
.main-caption .logo{
    display:inline-block;
    background-position:50%;
    background-repeat:no-repeat;
    background-size:cover;
    background-color:blue;

}
.main-caption .logo img{
    visibility:hidden;
    width:100%;
    height:auto;
}
.slides{
    position:relative;
    display:inline-block;
    width:50%;
    text-decoration:none;
    padding:0;
    margin:0;
    list-style:none;
    transition:translateX(-2em);
    z-index:9;
}
.slides li{
    list-style-type:none;
}
li h1{
    font-size:1.75em;
    font-weight:normal;
    margin:0;
    margin-bottom:1em;
}
</style>


 <div class="cont" id="cont">
  <div class='vid header'>
      <video autoplay muted loop id="myVideo">
          <source src="img/atur.shiraz-20181117-0001.mp4" type="video/mp4">
      </video>
  </div>
      <!--<div class="maskHeader" style="background: url(img/3px-tile.png);"></div>-->
<div class="maskHeaderajans">
    <div class="main-caption">
          <div class="logo" style="background-image:url('jk.png')">
              <img src="jk.png" alt="logo"  />
          </div>
          <ul class="slides" style="margin-top: 50px;">
              <li>
                  <h1 class="white" id="ajansname">AJANS ORDI</h1>
                  <h2 class="white">PER SAFAR, PER TAJROBE</h2>
              </li>
          </ul>
          <!-- end slider -->
      </div><!--  end main caption -->
    </div>
  </div>

Answer №2

To achieve the desired effect, make sure to set the parent element cont with a relative position and the overlapping divs with absolute positions.

#cont{
  position: relative;
}

.maskHeaderajans{
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.main-caption{
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Seeking animated SVGs using CSS styling

I've been trying to animate my SVG icon, but I seem to be missing something. I'm still fairly new to CSS animations. The issue I'm facing is that the position of the SVG isn't correct when the website loads. Additionally, during the an ...

htmlcssanimationsvg

Creating Engaging Web Pages with Dynamic Background Images per Section in WordPress

Currently, I am in the process of designing a webpage that consists of 5 sections, each with a height of 720px. My goal is to assign a unique background image to each section and have the ability to change these images through the WordPress backend. To ac ...

phphtmlcsswordpresscontent-management-system

Ways to customize the CSS of a website specifically for mobile browsers

I recently made some tweaks to the dropdown menu design on my website, and now it looks much better on mobile devices with a aqua light green/blue header color and #333 text in the dropdown. However, when I switch back to the desktop version, the entire me ...

csshtmltwitter-bootstrap

PHP function that allows toggling only the first item in an accordion

In my function.php file in WordPress, I have the following code that is called using a shortcode on certain pages. It loops through and displays FAQs stored with each post. However, I am facing an issue where only the first accordion item can be toggled, ...

phphtmlcsswordpress

Using Zurb Foundation to enable horizontal scrolling on an iPad

This is my first experience building a website with the Zurb Foundation framework, and so far, it's been a pretty smooth process. However, I'm encountering an issue when testing the site on an iPad in portrait orientation - there seems to be som ...

cssipadgridresponsive-designzurb-foundation

Tips for causing text to wrap to a new line when reaching the end of a div element

I am struggling with keeping a text inside a div from overflowing when it reaches the border of the div. I have tried various CSS properties like "word-break" and overflow, but haven't been able to find a solution. <div class="col-lg ...

htmlcsstextbootstrap-4

Please add content prior to the <input type="image"> tag

To improve the code for adding a product to the basket, I want to enhance the buy button by incorporating an image or background fill with HTML text on top of it. <input border="0" src="/images/buy.png" type="image" /> ...

htmlcsswebshop

Retrieve information from a variety of selected checkboxes

Is there a way to retrieve the values of check boxes that are generated dynamically? @ $db = mysql_connect("abc", "abc", ""); mysql_select_db("abc"); $strSQL = "SELECT * FROM student"; ...

phpjavascripthtmlajaxforms

Showcasing a checkbox with the chosen item marked as selected

My goal is to allow users to select hobbies from a checklist provided. The chosen hobbies should then be added to the user table. I want the checkboxes to display the user's current hobbies - checked if selected, unchecked if not. Users should be able ...

pythonhtmlgoogle-app-engine

Is there a way to incorporate a CSS file into this without explicitly mentioning the color?

I have successfully implemented a PHP solution for changing themes with a cookie that remembers the selected theme color when the user leaves the site. However, I now need to switch this functionality to JavaScript while still utilizing the CSS file. How c ...

javascriptphpcsscookiesthemes

The dropdown list is nowhere to be found in the page source when using Selenium

Currently, I am engaged in web scraping using Selenium. Successfully locating the input box and entering ID numbers is no issue. Yet, a roadblock presents itself - there is no submit button linked to the search bar. Once the numbers are inputted, the box a ...

pythonhtmlseleniumweb-scrapingmicrosoft-edge

Unable to successfully submit my form due to duplicate values in two <option> elements

UPDATE : My analysis of the issue was incorrect, all values equal to 0 are causing problems. You're right, it seems like the issue stems from the function itself. Do you have any suggestions on how to enhance that function? I'm facing an issue w ...

phphtml

What is the best way to ensure that two divs have aligned bottom edges?

I have a set of div containers positioned in different columns within a grid layout. I am looking for a way to identify the containers where the bottom edge is less than 50px higher than any other container, and adjust their heights so they align perfectly ...

jqueryhtmlcssgridalignment

Transfer the choices from a dropdown list to a different JSP page

In my current JSP code, I have a select element that looks like the following: <select name="withoutAccess" size="5"> <c:foreach var="item" items="${obj.withoutAccess}"> <option>${item}</option> </c:foreach> </sel ...

htmlformslistjsp

The Navbar Items Background Color is not functioning as anticipated

When the hamburger is clicked on mobile devices, I want my navbar items to have a full background-color display that only shows the logo, the hamburger icon, and the navigation items. The main content of the landing page should be hidden unless the hamburg ...

javascripthtmlcssbootstrap-4sass

Javascript: Retrieve the value of an element within a div that has been updated using ajax

On a page, I have a div that gets updated with Ajax requests and contains an input element with a dynamic name from which I need to retrieve data. The button and script that require this data are located on the main page. Interestingly, when I try to acces ...

javascriptjqueryhtmlajax

Caution: The file_get_contents function call cannot be processed as the filename is missing

Every time I attempt to upload an image, I encounter the following error: Warning: file_get_contents(): Filename cannot be empty Here is the code causing the issue: <?php $ImageName = $_FILES["file"]["name"]; $ImageType = $_FILES["file"]['type&a ...

phphtmlmysqlfile-upload

How can you adjust the height of flexbox items to be aligned?

I am struggling to create a unique flexbox layout with a large amount of text in the center area. As I resize the window (specifically reducing the height), I notice that the columns on the sides do not align properly with the main article, resulting in co ...

htmlcssflexbox

Implementing user-driven filtering in a React table

When a user clicks on the submit button, data will be loaded. If no filter is applied, all data will be displayed. const submit = async (e: SyntheticEvent) => { e.preventDefault(); const param = { ...(certificateNo && ...

javascripthtmlreactjsapireact-hooks

The proper rendering of <UL> inside <span> within <div> is not occurring as expected

Below is a div element: <DIV id=footerTop style="height:15%"> <DIV id=footerBottom> <DIV id=footerBottomLeft> <DIV id=footerBottomRight> <IMG alt=img src="i ...

csshtmljspdom