Creating overlapping layouts with absolute positioning in Bootstrap leads to a visually appealing

Question

Creating overlapping layouts with absolute positioning in Bootstrap leads to a visually appealing

I'm currently working on a layout that involves absolute positioning elements, similar to the one shown in this example:

https://i.sstatic.net/TixbZ.jpg

It seems like the elements are overlapping and not clearing properly. I've been looking for a simple solution to fix this issue, but haven't been successful in resolving it.

.main-block .main-wrapper {
  margin-bottom: 4rem;
}

.main-block .main-wrapper:nth-child(odd) .main-box {
  height: 100%;
}

.main-block .main-wrapper:nth-child(odd) .main-box .image-container {
  width: 440px;
}

.main-block .main-wrapper:nth-child(odd) .main-box .text-container {
  background-color: #8EFFFF;
  position: absolute;
  width: 720px;
  top: 3rem;
  z-index: -1;
  right: 15px;
  padding: 4em 5em;
}

.main-block .main-wrapper:nth-child(even) .main-box {
  height: 100%;
}

.main-block .main-wrapper:nth-child(even) .main-box .image-container {
  width: 440px;
  position: absolute;
  right: 15px;
}

.main-block .main-wrapper:nth-child(even) .main-box .text-container {
  background-color: #8EFFFF;
  position: relative;
  width: 720px;
  z-index: -1;
  padding: 4em 5em;
  top: 3rem;
}

<body>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf9f4f4efe8efe9faebdbafb5adb5aa">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

  <main role="main" id="content" class="site-content">
    <section class="py-5 main-block">
      <div class="container">
        <div class="row">
          <div class="col-lg">
            <h2 class="text-blue-dark mb-5">Creating a Special Layout</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12 main-wrapper">
            <div class="main-box">
              <div class="image-container"><img src="https://dummyimage.com/440x440/6b59b3/fff"></div>
              <div class="text-container">
                <h5 class="font-weight-bold">Lorem Ipsum Layout</h5>
                <div class="blurb mb-2">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  <p>Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sit amet aliquam id diam maecenas ultricies mi eget. Pellentesque dignissim enim sit amet. Mollis nunc sed id semper. Integer
                    malesuada nunc vel risus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Nisi est sit amet facilisis magna etiam tempor orci. Nulla facilisi cras fermentum odio eu. At quis risus sed vulputate odio ut enim blandit. Ipsum
                    suspendisse ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Vestibulum rhoncus est pellentesque elit ullamcorper. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis
                    at tellus at urna condimentum.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-12 main-wrapper">
            <div class="main-box">
              <div class="image-container"><img src="https://dummyimage.com/440x440/76b359/fff"></div>
              <div class="text-container">
                <h5 class="font-weight-bold">Special Design</h5>
                <div class="blurb mb-2">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  <p>Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sit amet aliquam id diam maecenas ultricies mi eget. Pellentesque dignissim enim sit amet. Mollis nunc sed id semper. Integer
                    malesuada nunc vel risus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Nisi est sit amet facilisis magna etiam tempor orci. Nulla facilisi cras fermentum odio eu. At quis risus sed vulputate odio ut enim blandit. Ipsum
                    suspendisse ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Vestibulum rhoncus est pellentesque elit ullamcorper. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis
                    at tellus at urna condimentum.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
</body>

html css twitter-bootstrap bootstrap-4 sass

Answer 1

Answer №1

Avoid using absolute positioning in this scenario as it can complicate layouts. Instead, consider utilizing standard Bootstrap columns and adjusting elements with negative margins.

.main-block .main-wrapper {
  margin-top: 3rem;
}

.main-block .image-container {
  width: calc(100% + 2rem);
}

.main-block .main-wrapper:nth-child(odd) .image-container {
  margin-left: -2rem;
}

.main-block .image-container img {
  margin-top: -2rem;
}

.main-block .main-wrapper .text-container {
  background-color: #8EFFFF;
  padding: 4rem 5rem;
  z-index: -1;
}

.main-block .main-wrapper:nth-child(odd) .text-container {
  margin-right: -2rem;
}

.main-block .main-wrapper:nth-child(even) .text-container {
  margin-left: -2rem;}< / code> </pre>
<pre class="highlight"><code> <body>
  <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086a67677c7b7c7a6978483c263e2639">[email protected] </a> / dist / css / bootstrap.min.css" integrity = "sha384 -zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG / eSrtxUkn" crossorigin = "anonymous">

  <main role = "main" id = "content" class = "site-content">
    <section class = "container py-5 main-block">
      <div class = "row">
        <div class = "col">
          <h2 class = "text-blue-dark mb-5"> Course of Lecture < / h2>
        </div>
      </div>

      <div class = "row main-wrapper">
        <div class = "col-4">
          <div class = "image-container">
            <img class = "img-fluid" src = "https://dummyimage.com/440x440/6b59b3/fff">
          </div>
        </div>

        <div class = "col-8 text-container">
          <h5 class = "font-weight-bold"> Lorem ipsum dolor sit amet < / h5>

          <div class = "blurb mb-2">
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. & lt; / p>
            <p> Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Suspendisse ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis at tellus at urna condimentum. & lt; / p>
          & lt; / div>
        < / div>
      & lt; / div>

      & lt; div class = "row main-wrapper" & gt;
        & lt; div class = "col-8 text-container" & gt;
          & lt; h5 class = "font-weight-bold" & gt; Sit amet aliquam & lt; / h5>

          <div class = "blurb mb-2">
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. & lt; / p>
            <p> Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Suspendisse ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis at tellus at urna condimentum. & lt; / p>
          & lt; / div>
        < / div>

        & lt; div class = "col-4" & gt;
          & lt; div class = "image-container" & gt;
            & lt; img class = "img-fluid" src = "https://dummyimage.com/440x440/76b359/fff">
          < / div>
        & lt; / div>
      & lt; / div>
    & lt; / section>
  & lt; / main>
& lt; / body>

Answer 2

Avoid using absolute positioning in this scenario as it can complicate layouts. Instead, consider utilizing standard Bootstrap columns and adjusting elements with negative margins.

.main-block .main-wrapper {
  margin-top: 3rem;
}

.main-block .image-container {
  width: calc(100% + 2rem);
}

.main-block .main-wrapper:nth-child(odd) .image-container {
  margin-left: -2rem;
}

.main-block .image-container img {
  margin-top: -2rem;
}

.main-block .main-wrapper .text-container {
  background-color: #8EFFFF;
  padding: 4rem 5rem;
  z-index: -1;
}

.main-block .main-wrapper:nth-child(odd) .text-container {
  margin-right: -2rem;
}

.main-block .main-wrapper:nth-child(even) .text-container {
  margin-left: -2rem;}< / code> </pre>
<pre class="highlight"><code> <body>
  <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086a67677c7b7c7a6978483c263e2639">[email protected] </a> / dist / css / bootstrap.min.css" integrity = "sha384 -zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG / eSrtxUkn" crossorigin = "anonymous">

  <main role = "main" id = "content" class = "site-content">
    <section class = "container py-5 main-block">
      <div class = "row">
        <div class = "col">
          <h2 class = "text-blue-dark mb-5"> Course of Lecture < / h2>
        </div>
      </div>

      <div class = "row main-wrapper">
        <div class = "col-4">
          <div class = "image-container">
            <img class = "img-fluid" src = "https://dummyimage.com/440x440/6b59b3/fff">
          </div>
        </div>

        <div class = "col-8 text-container">
          <h5 class = "font-weight-bold"> Lorem ipsum dolor sit amet < / h5>

          <div class = "blurb mb-2">
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. & lt; / p>
            <p> Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Suspendisse ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis at tellus at urna condimentum. & lt; / p>
          & lt; / div>
        < / div>
      & lt; / div>

      & lt; div class = "row main-wrapper" & gt;
        & lt; div class = "col-8 text-container" & gt;
          & lt; h5 class = "font-weight-bold" & gt; Sit amet aliquam & lt; / h5>

          <div class = "blurb mb-2">
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. & lt; / p>
            <p> Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Suspendisse ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis at tellus at urna condimentum. & lt; / p>
          & lt; / div>
        < / div>

        & lt; div class = "col-4" & gt;
          & lt; div class = "image-container" & gt;
            & lt; img class = "img-fluid" src = "https://dummyimage.com/440x440/76b359/fff">
          < / div>
        & lt; / div>
      & lt; / div>
    & lt; / section>
  & lt; / main>
& lt; / body>

Creating overlapping layouts with absolute positioning in Bootstrap leads to a visually appealing

Answer №1

Similar questions

Tips for positioning a navigation bar in the center for various screen resolutions

In JavaScript, implement event listeners exclusively on the main container and its immediate child elements

What causes discrepancies in CSS design across different browsers?

Is there a way to exclude the Unicode character from the first menu item while still utilizing it in the other items on my menu?

Is it possible to toggle between thumbnails and a larger image in a jQuery gallery?

Having trouble with a basic jQuery selector not functioning as expected

Getting rid of the empty spaces between the lines of cards in Bootstrap 4

Activate unresponsive state when clicked

The production build encountered an issue as it was anticipating 3 arguments, however, it only received

Having issues getting the single div to refresh with `.#div.load(scriptpage.php)` command

How to extract selected value from a dropdown menu in a React component

Instructions for selecting an <option> within a <select> element using Python

Implementing a Custom CSS Theme in JavaFX

I encountered an error while trying to synchronize my Redux state with the component state

What is the most efficient way to load a PHP page once the webpage has completely finished loading?

The alteration of the primary color to $theme-colors caused the button-primary's text color to switch from default white to black

Display and conceal specific table cells based on a user's search for a singular cell

What is the best approach to refreshing a particular div with the contents of a view file?

Angular 2 Date Input failing to bind to date input value

Learn how to create a logarithmic scale graph using CanvasJS by fetching data from an AJAX call