Bootstrap 绝对定位创建重叠布局

Question

我正在尝试创建一个带有绝对定位元素的布局，如下所示：

如您所见，元素重叠且未正确清除。也许有一个非常简单的修复方法，但我一直无法弄清楚如何解决这个问题。

.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/bootstrap@4.6.1/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">Cursus euismod quis</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 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. 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">Sit amet aliquam</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>

Answer 1

这里不需要绝对定位。对于复杂的布局来说，这可能是一个真正的痛苦。我会使用传统的 Bootstrap 列并以负边距稍微移动一下。

.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;
}

<body>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/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">Cursus euismod quis</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. 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 class="row main-wrapper">
        <div class="col-8 text-container">
          <h5 class="font-weight-bold">Sit amet aliquam</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 class="col-4">
          <div class="image-container">
            <img class="img-fluid" src="https://dummyimage.com/440x440/76b359/fff">
          </div>
        </div>
      </div>
    </section>
  </main>
</body>

Bootstrap 绝对定位创建重叠布局

Bootstrap absolute positioning creating overlapping layout

html

css

sass

twitter-bootstrap

bootstrap-4