图库与其他 DOM 元素重叠 - 需要帮助修复布局

问题描述 投票：0回答：1

在此输入图片描述

我目前正在开发一个项目，其中我有一个作为滑块（.slider 和 .slides）实现的画廊。但是，我面临一个问题，即图库与页面上的其他元素重叠。尽管尝试了不同的方法，问题仍然存在。

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/normalize.css" />
    <link rel="stylesheet" href="../css/styles.css" />
    <script
      src="https://kit.fontawesome.com/e2882607ff.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="building--container poppins-regular">
      <div class="slider">
        <div
          class="slides"
          style="--img: url('../projects/CIPHER/B1.jpg')"
          title="Cipher"
        >
          <div class="content">
            <p class="project-title">Project Cipher</p>
            <p class="project-description">
              Description: 2024 ***
            </p>
            <p class="client">Client: MR. Drew.</p>
            <p class="project-description">
              Role: Lead Architectural designer.
            </p>
            <p class="project-description">Satisfied Client.</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CIPHER/B2.jpg')"
          title="Cipher"
        >
          <div class="content">
            <p class="project-title">Cipher 02</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CIPHER/B3.jpg')"
        >
          <div class="content">
            <p class="project-title">Cipher 03</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CIPHER/B4.jpg')"
        >
          <div class="content">
            <p class="project-title">Cipher 04</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CIPHER/B5.jpg')"
        >
          <div class="content">
            <p class="project-title">Cipher 05</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CIPHER/B6.jpg')"
        >
          <div class="content">
            <p class="project-title">Cipher 06</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CIPHER/B7.jpg')"
        >
          <div class="content">
            <p class="project-title">Cipher 07</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CIPHER/B8.jpg')"
        >
          <div class="content">
            <p class="project-title">Cipher 08</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CIPHER/B9.jpg')"
        >
          <div class="content">
            <p class="project-title">Cipher 09</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CIPHER/B10.jpg')"
          title="Cipher"
        >
          <div class="content">
            <p class="project-title">Cipher 10</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CIPHER/B11.jpg')"
          title="Cipher"
        >
          <div class="content">
            <p class="project-title">Cipher 11</p>
          </div>
        </div>
        <div class="slides" style="--img: url('../projects/CIPHER/B12.jpg')">
          <div class="content">
            <p class="project-title">Cipher 12</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CIPHER/B13.jpg')"
          title="Cipher"
        >
          <div class="content">
            <p class="project-title">Cipher 13</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CIPHER/B14.jpg')"
          title="Cipher"
        >
          <div class="content">
            <p class="project-title">Cipher 14</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CUBES/001.jpg')"
        >
          <div class="content">
            <p class="project-title">CUBES</p>
            <p class="project-description">
              Description: 2024***
            </p>
            <p class="client">Client: Ghanaian</p>
            <p class="project-description">
              Role: Lead Architectural designer.
            </p>
            <p class="project-description">Satisfied Client.</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CUBES/002.jpg')"
        >
          <div class="content">
            <p class="project-title">CUBES</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CUBES/003.jpg')"
        >
          <div class="content">
            <p class="project-title">CUBES</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CUBES/004.jpg')"        >
          <div class="content">
            <p class="project-title">CUBES</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CUBES/005.jpg')"        >
          <div class="content">
            <p class="project-title">CUBES</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CUBES/006.jpg')"
        >
          <div class="content">
            <p class="project-title">CUBES</p>
          </div>
        </div>
        <!-- CUBIOD -->
        <div
          class="slides"
          style="--img: url('../projects/CUBOID/001.jpg')">
          <div class="content">
            <p class="project-title">CUBIOD</p>
            <p class="project-description">
              Description: 2024 2 ***
            </p>
            <p class="client">Client:</p>
            <p class="project-description">
              Role: Lead Architectural designer.
            </p>
            <p class="project-description">Satisfied Client.</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CUBOID/002.jpg')"
          title="CUBIOD 02"
        >
          <div class="content">
            <p class="project-title">CUBIOD</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CUBOID/003.jpg')"
        >
          <div class="content">
            <p class="project-title">CUBIOD</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CUBOID/004.jpg')"
        >
          <div class="content">
            <p class="project-title">CUBIOD</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CUBOID/005.jpg')"
        >
          <div class="content">
            <p class="project-title">CUBIOD</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/CUBOID/006.jpg')"
        >
          <div class="content">
            <p class="project-title">CUBIOD</p>
          </div>
        </div>
        <!-- ECLIPSE-->
        <div
          class="slides"
          style="--img: url('../projects/ECLIPSE/001.jpg')">
          <div class="content">
            <p class="project-title">ECLIPSE</p>
            <p class="project-description">
              Description: 2024***
            </p>
            <p class="client">Client: Ghanaian</p>
            <p class="project-description">
              Role: Lead Architectural designer.
            </p>
            <p class="project-description">Satisfied Client.</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/ECLIPSE/002.jpg')"
        >
          <div class="content">
            <p class="project-title">ECLIPSE</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/ECLIPSE/003.jpg')"        >
          <div class="content">
            <p class="project-title">ECLIPSE</p>
          </div>
        </div>
        <div
          class="slides"
          style="--img: url('../projects/ECLIPSE/004.jpg')"
        >
          <div class="content">
            <p class="project-title">ECLIPSE</p>
          </div>
        </div>
      </div>
    </div>
    <div class="buttons">
      <span class="prev" aria-label="Previous Slide"></span>
      <span class="next" aria-label="Next Slide"></span>
    </div>
      </body>
</html>

CSS

.building--container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  max-width: calc(100vw - 40px);
  background: #ccc;
  border-radius: 2rem;
  padding: 20px;
}

.slider .slides {
  align-items: flex-end;
  background-image: var(--img);
  background-position: center;
  background-size: cover;
  border-radius: 2rem;
  box-shadow: 0 25px 50px rgba(34, 34, 34, 0.5);
  display: flex;
  height: 320px;
  justify-content: flex-start;
  object-fit: cover;
  position: absolute;
  top: 65%;
  transform: translateY(-50%);
  transition: 0.5s;
  width: 240px;
}

.slider .slides:nth-child(1),
.slider .slides:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(0);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0);
  background-size: cover;
}

我尝试对 .slides 元素使用position:absolute，但这会导致它们与 DOM 中的其他元素重叠。我已经在 .building--container 和 .slider 中使用 flexbox 调整了布局，但问题仍然发生，也尝试在 max-width 属性中使用 calc() 来考虑间距，但它没有解决问题。

期望。 我希望图库保留在其容器内，而不与页面上的其他元素重叠。它应该保持布局具有适当的间距，而不干扰其后面或周围的元素。

任何人都可以帮助我了解造成这种重叠的原因以及如何解决它吗？

html css layout
1个回答
0
投票

你的 html 看起来不错，这里是 css

   .building--container {
  display: flex;
  align-items: center;
}

.slider {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  max-width: calc(100vw - 40px);
  background: #ccc;
  border-radius: 2rem;
  padding: 20px;
  overflow: hidden; /* Ensures slides don't overflow the slider */
  position: relative;
}

.slider .slides {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  background-image: var(--img);
  background-position: center;
  background-size: cover;
  border-radius: 2rem;
  box-shadow: 0 25px 50px rgba(34, 34, 34, 0.5);
  height: 320px;
  width: 240px;
  flex-shrink: 0; /* Prevents slides from shrinking */
  transition: transform 0.5s ease-in-out; /* Smooth sliding effect */
  position: relative; /* Allows stacking without unnecessary absolute positioning */
}

.slider .slides:nth-child(1),
.slider .slides:nth-child(2) {
  background-size: cover; /* Ensure proper background sizing */
  z-index: 1; /* Optional: manage stacking order */
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.