Layer several divs inside a main div

I'm grappling with a simple issue and could use some help to resolve it.

Utilizing bootstrap, below is my CSS and div structure. How can I achieve an overlap of DIV 1, DIV 2, and DIV 3? Essentially, I want to position them on the same level, one behind the other.

Visit the Fiddle

.sub{
    position: relative;
    background-color: lime;
}
.og{
    margin-top: 15px;
    position: relative;
    text-align: center;
}
#itmHolder{
    position: absolute;
}

HTML:

<div class="row">
    <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 og">
        <div class="itmHolder">
           <div class="sub">DIV 1</div>
           <div class="sub">DIV 2</div>
           <div class="sub">DIV 3</div>
        </div>
        <div class="itmHolder">
           <button type="button" class="normalBtn">Button</button>
        </div>
    </div>
</div>

Desired outcome (DIV 1 and DIV 2 positioned behind DIV 3):

htmlcss

Answer №1

To achieve the desired result, you can use the CSS code provided below:

.itmHolder {
    position: relative;
}

.itmHolder :nth-child(2), .itmHolder :nth-child(3){
    position: absolute;
    top:0;
    width:100%;
}

View the demo on JSFiddle

.sub{
    position: relative;
    background-color: lime;
}
.itmHolder {
    position: relative;
}

.itmHolder :nth-child(2) , .itmHolder :nth-child(3){
    position: absolute;
    top:0;
    width:100%;
} 
.og{
    margin-top: 15px;
    position: relative;
    text-align: center;
}
#itmHolder{
    position: absolute;
}
<div class="row">
    <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 og">
        <div class="itmHolder">
            <div class="sub">DIV 1</div>
            <div class="sub">DIV 2</div>
            <div class="sub">DIV 3</div>
        </div>
        <div class="itmHolder">
            <button type="button" class="normalBtn">Button</button>
        </div>
    </div>
</div>

Answer №2

To achieve this effect, you can set the position of elements to absolute and specify the size of the parent element. Take a look at the example below:

#cont {
  position: relative;
  width: 100px;
  height: 20px;
  background-color: yellow;
}
.sub {
  position: absolute;
  top: 0px;
  left: 0px;
}
<div class="row">
<div class="og">
    <div class="itmHolder" id="cont" >
       <div class="sub" id="div1">DIV 1</div>
       <div class="sub" id="div2">DIV 2</div>
       <div class="sub" id="div3">DIV 3</div>
    </div>
    <div class="itmHolder">
       <button type="button" class="normalBtn" >Button</button>
    </div>
</div>
</div>

If you prefer not to specify the size of the parent element and want it to match the size of the child, you can leave one child element as static, as shown below:

#cont {
  position: relative;
  background-color: yellow;
}
.sub {
  position: absolute;
  top: 0px;
  left: 0px;
}
<div class="row">
<div class="og">
    <div class="itmHolder" id="cont" >
       <div id="div1">DIV 1</div>
       <div class="sub" id="div2">DIV 2</div>
       <div class="sub" id="div3">DIV 3</div>
    </div>
    <div class="itmHolder">
       <button type="button" class="normalBtn" >Button</button>
    </div>
</div>
</div>

In the example above, the size of #cont will be determined by #div1.

Answer №3

Give this a shot

        .dimension {
        height: 50px;
    }

    .overlap {
        position: relative;
        margin-top: -50px;
        background-color: lime;
    }

    .og {
        margin-top: 15px;
        position: relative;
        text-align: center;
    }

    #itmHolder {
        position: absolute;
    }

HTML

<div class="row">
    <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 og">
        <div class="itmHolder">
            <div class="dimension">DIV 1</div>
            <div class="dimension overlap">DIV 2</div>
            <div class="dimension overlap">DIV 3</div>
        </div>
        <div class="itmHolder">
            <button type="button" class="normalBtn">Button</button>
        </div>
    </div>
</div>

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

What is the process for incorporating ejs into the source attribute of an image element?

Code Snippet: <img class="card-img-top" alt="..."><%= articles.image %><img> Server Setup: const express = require('express') const app = express() const router = require('./routes/article') app ...

javascripthtmlnode.jsejs

Achieve full width with flexbox column wrap while minimizing the height

How can I arrange elements in columns within a container with a fixed width and variable height, when the number of elements is unknown? My challenge is that I do not know the maximum width of the child elements, preventing me from setting specific column ...

cssflexbox

Creating a dynamic web application using Node.js, HTML, and MySQL arrays

After querying my database from MySQL Workbench, I need to convert the retrieved data into HTML code. connection.query( 'SELECT dealer_infor.dealer_id, dealer_infor.dealer_branch, dealer_infor.dealer_address, dealer_infor.dealer_tel, dealer_infor. ...

htmlmysqlnode.js

"Create a dynamic HTML newsletter utilizing tables similar to the responsive design principles

Looking to create a mobile-responsive newsletter using my style.css <table cellpadding="0" cellspacing="0" border="0" align="center" width="600" bgcolor="#fff"> <tbody> <tr> <td style="padding-bottom:5px" valign="top"&g ...

htmlcsstwitter-bootstraphtml-tablenewsletter

Ways to update HTML values using Events

I am attempting to retrieve a value using Events (ionic) once it listens for my 'onSMSArrive' event. I am able to successfully retrieve the value from the events. However, I am encountering an issue where the value is not updating in my app. Bel ...

htmltypescriptionic2

A pair of inline divs (personal computer) set with vertical alignment in the center on media sources

Struggling to create a topbar for a webpage with 2 inline divs and having difficulty centering them vertically on media screens. (Paint) example of what I am trying to achieve Currently using float: left; to keep the divs inline along with display: inlin ...

htmlcsshtml-lists

.cshtml fusion turns sour

My attempt to create a loop that displays small boxes led me to the following code snippet with unexpected results: (code) : <div class="row"> <div class="col-lg-3 col-xs-6"> <!-- small box --> <!-- please change the addr ...

c#htmlasp.net

Bootstrap 5 alert: The function `$(...).carousel` is not recognized

Despite browsing through numerous similar questions, none of the solutions seem to work for my issue. Listed below are some points I have checked: Jquery is loaded before bootstrap Bootstrap libraries are up to date Confirmation that bootstrap.min. ...

javascripthtmlcssbootstrap-5

Place a pair of divs in the center next to one another

What is the best way to align two divs in the center beside each other with some padding in between that actually works? I attempted using display: inline, but it didn't have the desired effect. .my-container { position: rela ...

htmlcss

Tips for customizing the CSS styling of the validation ng-class error

Seeking advice: Is there a way to customize the CSS style of the 'error' validation error for ng-class in Bootstrap v3? This is my current code: ng-class="(form.datos.$invalid) && ( form.datos.$touched || submitted) ? 'error&apos ...

cssangularjs

Why are my Bootstrap nav-tabs not showing tab-content in MVC?

I'm dynamically creating tab navigation from controllers using a list. <div class=""row> <div class="col-xl-3"> <!-- Tabs nav --> <div class="nav flex-column nav-pills nav-pills-custom" id="v-p ...

javascripthtmlasp.net-mvcasp.net-corebootstrap-4

How can an HTML form element identify which submit button has been clicked?

In my HTML form, I have included 2 buttons to meet the requirements of our customers. I am trying to determine how to identify which button was pressed on the backend. Below is a code snippet that demonstrates this: <form method="get"> < ...

html

How can I utilize PHP to generate several tables within a single database?

I need some guidance on creating multiple tables within the "new" database. I'm curious if it's possible to include PHP code inside the query to generate table names dynamically. Any help would be greatly appreciated. Thank you in advance. <? ...

phphtmlmysqlmysqli

Keep the table header in place while scrolling

I am currently working with Bootstrap V4 alpha 6 and Angular 5 to develop a table that includes a fixed header while scrolling. Unfortunately, I have been facing challenges in getting this functionality to work effectively. Note: The navbar is set to fixe ...

csstwitter-bootstrapbootstrap-4

Adjust the class based on the model's value in AngularJS

items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'} html <div class="variable" ng-repeat="item in items">{{item}} </div> ...

javascriptcssangularjsangularjs-ng-repeat

"Exploring Angular 9: A guide to retrieving form data with an array of objects [Revised as of July 29th, 2020

I am encountering an issue with my Angular 9 form code. I am getting the error "ERROR TypeError: Cannot read property 'mobile_number' of undefined" and I need help in resolving this problem. <form (ngSubmit)="processForm()"> & ...

htmlangulartypescriptangular-forms

What is the best way to deactivate certain JavaScript functions on my webpage when accessed through a mobile device?

Is there a way to disable specific JavaScript functions when accessing my website from a mobile device? While I can achieve this using CSS only, certain buttons require JavaScript functionality. Below is the internal JavaScript code: var menuBtn = docume ...

javascripthtmlresponsive

Adjusting image sizes in WordPress using CSS and HTML

I am currently working on a blog using the Marlene theme on Wordpress. For my posts, the default image resolution is 835x577, which suits my needs perfectly (see example post). However, I also have a "News" page where I want to display a list of all news ...

phphtmlcsswordpress

Is it possible to use negative values in css?

Is it acceptable to utilize negative values in CSS? For instance: margin:-11px 20px -18px 0px; OR Is there a prevailing guideline that prohibits the use of negative values? ...

css

Is it necessary to have aria-checked attribute on a physical checkbox?

I've come across many instances of customized checkboxes that utilize the 'aria-checked' attribute. However, I am curious if it is necessary to include this attribute when using input type=checkbox? Will the checkbox still be accessible to s ...

htmlaccessibilityaccessible