What is the best way to position a container div over another container using Bootstrap or CSS?

Question

What is the best way to position a container div over another container using Bootstrap or CSS?

https://i.sstatic.net/q1qGi.png

I'm working on a Bootstrap 4 layout where container B needs to overlay part of container A. I want to achieve a design where container B appears on top of container A. Any suggestions or references on how to achieve this layout would be greatly appreciated.

  <!-- container A -->
        <div class="container-fluid">
         <div class="row text-center">
            <div class="col-12">
              <h4>HOW IT WORKS</h4>
            </div>
          </div>
        
          <div class="row text-center">
            <div class="offset-md-2 col-md-2 px-0">
                <div class="card">
                    <div class="card-header">
                      card 1 title
                    </div>
                    <div class="card-body">
                       card 1 body
              
                    </div>
                  </div>
            </div>
            <div class="offset-md-1 col-md-2">
              <div class="card">
                    <div class="card-header">
                      card 2 header
                    </div>
                    <div class="card-body">
                        card 2 body
                    </div>
                  </div>
            </div>
            <div class="offset-md-1 col-md-2">
                <div class="card">
                    <div class="card-header">
                      card 3 header
                    </div>
                    <div class="card-body">
                      card 4 body
                    </div>
                  </div>
            </div>

          </div>
        </div>

        <!-- container B -->

        <div class="container rounded-border">
          <div class="row">
            <div class="col-12 text-center">
              <h4 class="display-4">What is Lorem Ipsum</h4>
              <p>
              ustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker includin
              </p>
            </div>
           
          </div>
        </div>

javascript html css bootstrap-4

Answer 1

Answer №1

One way to achieve the desired layout is by utilizing pure CSS, specifically by positioning an element absolutely within a relatively positioned container. By setting the values for the top and left properties in the CSS, you can control the placement of Container B in relation to its parent div.

#outerContainer{
  position: relative;
}
#containerA{ 
    height: 100px;
    width: 500px;
    border: solid 1px gray; 
}
#containerB{
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 300px;
  z-index: 1;
  background-color: maroon;
  color: white;
  border: solid 1px gray;
}
#rest-of-page{
  height: 100px;
  width: 500px;
  border: solid 1px gray;
}

<div id="outerContainer">
  <div id="containerA">Container A</div>
  <div id="containerB">Container B</div>
  <div id="rest-of-page">(Rest of Page)</div>
</div>

Answer 2

One way to achieve the desired layout is by utilizing pure CSS, specifically by positioning an element absolutely within a relatively positioned container. By setting the values for the top and left properties in the CSS, you can control the placement of Container B in relation to its parent div.

#outerContainer{
  position: relative;
}
#containerA{ 
    height: 100px;
    width: 500px;
    border: solid 1px gray; 
}
#containerB{
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 300px;
  z-index: 1;
  background-color: maroon;
  color: white;
  border: solid 1px gray;
}
#rest-of-page{
  height: 100px;
  width: 500px;
  border: solid 1px gray;
}

<div id="outerContainer">
  <div id="containerA">Container A</div>
  <div id="containerB">Container B</div>
  <div id="rest-of-page">(Rest of Page)</div>
</div>

Answer 3

Answer №2

To achieve the desired layout, apply absolute positioning to container B to determine its exact position. Next, use z-index on container B and assign it a value of 1 to ensure it appears on top of element A.

For more information on z-index, you can visit: https://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 4

To achieve the desired layout, apply absolute positioning to container B to determine its exact position. Next, use z-index on container B and assign it a value of 1 to ensure it appears on top of element A.

For more information on z-index, you can visit: https://www.w3schools.com/cssref/pr_pos_z-index.asp

What is the best way to position a container div over another container using Bootstrap or CSS?

Answer №1

Answer №2

Similar questions

What is the best way to enclose text within a border on a button?

Attempting to send an AJAX request to a different server (not functioning with the provided example)

How can we use JavaScript to add a class to the <html> element?

"Identifying the exact number of keys in a JSON object using

"Effortlessly transform a JSON string into a JSON Object with JavaScript - here's how

Retrieve the chosen option within the current page

What could be causing the submit action to not work when using PHP's isset function?

Having issues with IE8 and SmoothGallery script errors

Adding a div to the preceding div based on matching IDs in AngularJS

What are some ways to troubleshoot a dropdown box toggle switch in a website header?

Add new data to an existing array in Angular 7 without overwriting it

Definition of Stencil Component Method

"Encountering issues while upgrading Polymer project version from 0.5 to 1.0

Find the difference between the sum of diagonals in a 2D matrix using JavaScript

Executing an on-click event on a button in PHP

Ways to incorporate color gradients into the corners of CSS cards

Create dynamic animations on HTML text using CSS

Implementing automatic line breaks in Bootstrap

Leveraging font awesome ttf in conjunction with scss

Whenever I create the code using javascript, padding seems to always show up