How can I utilize Bootstrap to organize multiple div layers on top of each other?

I am trying to accomplish the following: layered div

The rows are displaying correctly, but I'm having trouble positioning the top layer div (the one with the class map) in the correct place. It keeps pushing some of the rows to the side. How can I achieve the desired layout using bootstrap?

/*  Here is my CSS (index.css): */
.container-full {
   margin: 0 auto;
   width: 90%;
   margin-bottom: 100px;
 }

.blue-row{
    height: 200px;
    background: linear-gradient(#4b7fe4, #99B4E8)
}
.grey-row{
    background-color: #e3e3e3;   
}

.darkgrey-row{
    height: 100px;
    background-color: #bebebe;   
}

.map{
    height: 200px;
    width: 200px;
    position: relative;
    z-index:9999;
    background:red;
}
<div class="container container-full" ng-app="myApp" ng-controller="myCtrl">
<div class="row blue-row">
asas     
</div>
<div class="row grey-row">
    <div class="map"> <!-- This is the top layer div -->
        content          
    </div>
</div>
<div class="row darkgrey-row">asasas</div>

htmlcsstwitter-bootstrap

Answer №1

Is this what you had in mind?

.container-full {
   margin: 0 auto;
   width: 90%;
   margin-bottom: 100px;
  position:relative;
 }

.blue-row{
    height: 200px;
    background: linear-gradient(#4b7fe4, #99B4E8)
}
.grey-row{
    background-color: #e3e3e3;   
}

.darkgrey-row{
    height: 100px;
    background-color: #bebebe;   
}

.map{
    height: 200px;
    width: 200px;
    position: absolute;
    background:red;
    top:50%;
    left:50%;
    z-index:9999;
  transform:translate(-50%,-50%);
}
<div class="container container-full" ng-app="myApp" ng-controller="myCtrl">
<div class="row blue-row">
asas     
</div>
<div class="row grey-row">
    <div class="map"> <!-- top layer div -->
        content          
    </div>
</div>
<div class="row darkgrey-row">asasas</div>

Answer №2

Take a look at this:

If you want to keep that top level div in place, try setting .map > position:absolute

.container-full {
   margin: 0 auto;
   width: 90%;
   margin-bottom: 100px;
 }

.blue-row{
    height: 200px;
    background: linear-gradient(#4b7fe4, #99B4E8)
}
.grey-row{
    background-color: #e3e3e3;   
    height:150px;
}

.darkgrey-row{
    height: 100px;
    background-color: #bebebe;   
}

.map{
    height: 200px;
    width: 200px;
    z-index:9999;
    background:red;
    left:-50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position:fixed;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container container-full" ng-app="myApp" ng-controller="myCtrl">
<div class="row blue-row">
asas     
</div>
<div class="row grey-row">
    <div class="map">
      content
    </div>
</div>
<div class="row darkgrey-row">asasas</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

Troubleshooting: Issues with Integrating Javascript and CSS into

I'm still new to this platform, so please correct me if I make any mistakes. My goal is to create a "task table" that allows users to edit existing tasks and add new ones. Thanks to the base template provided by Ash Blue, I've managed to program ...

javascriptjqueryhtmlcsshtml-table

Create a grid or flex layout with Bootstrap 4 that features a sticky first row and column

Does anyone have any suggestions on how to make the attached grid/table layout responsive using Bootstrap 4's flex/grid system? The layout should include a sticky first row and column for navigation items. I attempted using w- & h- classes, but it do ...

htmlcsstwitter-bootstrapbootstrap-4

What are some tips for using CSS display grid to effectively showcase my HTML content?

Visit my About Me page with custom menu styling Any tips on aligning the body with the grid function to achieve this particular design? ...

htmlcsscss-grid

Struggles with conflicting versions of Jquery within asp.net

Here is a snippet of my jQuery function: $(window).scroll(function () { if ($(window).scrollTop() > offset.top) { $("#sidebar").css("marginTop", $(window).scrollTop.length - offset.top); $("#sidebar").css({ o ...

jqueryasp.nethtml

Problem with Google+ Button Alignment

I arranged my social media buttons in a row - Twitter, Facebook & Google+. The issue is that the Google+ button is not aligning properly. It appears to be spaced out about 3 times further than the Twitter and Facebook buttons. I attempted adjusting the p ...

htmlcssbutton

Using multiple selectors in JQuery and Javascript

I have a challenge where I need to execute different actions for specific divs. Here is the code snippet I currently have: $("#pending-cancel-1, #pending-cancel-2").click(function(){ Do something special for pending-cancel-1 and pending-cancel-2... }) ...

javascriptjqueryhtmlif-statement

Optimizing Image Size According to the Container, Not the Screen Size: A Guide

After exploring various resources on responsive images, I have come across a challenge that has me stumped. It seems like it should be simple, but I can't quite figure it out: How can I serve the appropriate image size based on container width rather ...

htmlcssimageimage-processingresponsive

Using CSS nth-of-type on the same level of the DOM allows for specific

I was having trouble using the nth-of-type(2n+1) selector to target odd and even rows in the scenario below. What I wanted was for the nth-of-type selector to apply different styles to the odd rows with the classes "row-data row-header" and "row-data row-c ...

javascriptjqueryhtmlcss

Angular: bypassSecurityTrustHtml sanitizer does not render the attribute (click)

I'm facing an issue where a button I rendered is not executing the alertWindow function when clicked. Can anyone help?: app.component.ts: import { Component, ElementRef, OnInit, ViewEncapsulation } from '@angular/core'; import ...

htmlangulartypescript

Mastering the art of flawlessly executing kerning-generated code

I am facing a problem while implementing logotext with kerning technique in the <header> element. I found a useful tool made by Mr. Andrew which can be accessed through this link. Before making any modifications, I had the following code in the heade ...

phphtmlcsswordpresskerning

Determining the dimensions of a div with a scrollbar using Jquery

Is there a way to get the width and height of a div with scroll that includes both visible and hidden content using JQuery? If anyone has a solution for getting these values, please share. <div id="area" class="divLeftCem area"> <div id="pan ...

javascriptjqueryhtmlcss

What steps can be taken to prevent a "Flash of Unstyled Content" when using fixed-width cells in CSS Tables?

My website's design is heavily influenced by CSS tables. This decision was made to ensure consistent cell heights regardless of the content, making alignment easier. Overall, this method has been quite effective. However, there is an issue where the ...

htmlcssfouc

"Can you provide instructions on how to set the background to the selected button

How can I change the background color of a selected button in this menu? Here is the code for the menu: <ul id="menu"> <li class="current_page_item"><a class="button" id="showdiv1"><span>Homepage</span></a></ ...

javascriptjqueryhtmlcss

Dynamically indicate the destination for AJAX success feedback across various forms

Here are a couple of inquiries: Is there a way to incorporate a second form on the same page and dynamically handle each form based on which submit button is clicked? Let's say I have several forms on one page. How can I alter the output destina ...

javascriptphpjqueryhtmlajax

Refreshing the Java Applet upon page reload

Is there a way to automatically refresh a .jar applet on a website without the need to quit and restart the browser? I am constantly making changes to the applet's class files and it's frustrating to have to manually refresh the applet every time ...

javajavascripthtmlapplet

What steps are needed to implement Javascript functionality for a Carousel with Bootstrap 4?

Hello, I'm having some trouble with a carousel for a restaurant's page. I followed a tutorial to code it using Bootstrap, but the carousel isn't moving as expected. I suspect there might be an issue with the JavaScript, even though I've ...

javascripthtmlbootstrap-4

Sending Image Data in Base64 Format with Ajax - Dealing with Truncated Data

My current challenge involves sending Base64 image data through ajax to the Server. I've noticed that sometimes all the pictures are successfully sent, but other times only a few make it through. Does anyone have suggestions on how to implement error ...

javascriptajaxhtmlcordova

The proper approach is using CSS for linking pseudo-classes

Look what I stumbled upon: Important: Remember, a:hover MUST be placed after a:link and a:visited in the CSS code to work properly!! Remember: Place a:active after a:hover for it to have an effect in the CSS code!! Note: Pseudo-class names are not case- ...

htmlcsspseudo-class

Tips on leveraging state values within the makeStyles function in Material UI React

I'm in the process of building a Webpage and incorporating Material UI for the Components. Here's the code: import { makeStyles, Typography } from "@material-ui/core"; const useStyles = makeStyles((theme) => ({ container: { ...

javascripthtmlreactjsreact-nativematerial-ui

Achieve a fading effect on an element as you scroll down the page

I successfully implemented a toggle audio button on my website, but now I would like it to fade in along with the scroll-to-top button that I also have (which operates similarly to the buttons on scrolltotop.com). Is there a simple way to achieve this? He ...

javascripthtmlcss