这里有两张示例图，可以直观看到问题：

• （短文本情况下的目标位置）
• （长文本时计数器发生移位的异常状态）

我现在碰到一个轮播图的小麻烦：轮播上的计数器会跟着段落文本的长度发生移位，完全不是我想要的固定位置效果。

我已经尝试过两种方法来修复：

• 把图片和轮播计数器包裹到一个新的相对定位元素里
• 调整.carousel-counter的CSS定位属性

但看起来哪里操作错了，问题还是没解决。

注：目前还没做移动端适配，移动端可能无法正常显示效果

以下是我的代码：

CSS 代码 #

/* Photo grid */
.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 40px;
  background-color: black;
}

.image-item {
  text-align: center;
  color: white;
}

.image-item img {
  max-width: 100%;
  /* Prevents the image from exceeding its container's width */
  height: auto;
  aspect-ratio: 3 / 2;
  /* Maintain aspect ratio */
  object-fit: cover;
  border-radius: 10px;
  max-height: 400px;
  /* Adjust this value to control the height of the images */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
  margin-bottom: 15px;
}

.image-item h3 {
  font-size: 1.2em;
  margin: 10px 0;
}

.image-item p {
  font-size: 0.9em;
  color: #ccc;
}

/* Carousel Styles */
.carousel {
  position: relative;
  /* Make this container the reference for absolutely positioned elements */
  width: 100%;
  margin: 0 auto;
}

.carousel-container {
  position: relative;
  /* Ensure the container is the reference for absolute positioning */
  overflow: hidden;
  /* Prevent overflow of slides or elements */
}

.carousel-slides {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-slide {
  position: relative;
  /* Ensure the slide is the reference for absolute positioning */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 100%;
  /* Ensures each slide takes up the full width of the carousel */
  flex-direction: column;
}

.carousel-slide p {
  flex-basis: auto;
  /* Let the text adapt to its content size */
}

.image-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  max-height: 400px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
  z-index: 0;
}

/* Horizontal images (3:2 aspect ratio) */
.carousel-slide img.horizontal {
  aspect-ratio: 3 / 2;
  /* Force 3:2 aspect ratio */
  object-fit: cover;
  /* Crop to fit */
  width: 100%;
  /* Ensure the image fills the container width */
  height: auto;
  /* Maintain aspect ratio */
  border-radius: 10px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
}

/* Vertical images (2:3 aspect ratio) */
.carousel-slide img.vertical {
  aspect-ratio: 2 / 3;
  /* Force 2:3 aspect ratio */
  object-fit: contain;
  /* Maintain aspect ratio without cropping */
  width: 100%;
  /* Ensure the image fills the container width */
  height: auto;
  /* Maintain aspect ratio */
  border-radius: 10px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
}

.carousel-slide img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  /*to maintain aspect ratio */
  border-radius: 10px;
  max-height: 400px;
  margin-bottom: 15px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
  flex-basis: auto;
  /* Allow images to take up only as much space as needed */
}

/* Counter */
.carousel-counter {
  position: absolute;
  top: 10px;
  /* Move the counter to the top */
  left: 10px;
  /* Move the counter to the left */
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  z-index: 10;
  pointer-events: none;
  /* Prevent interaction */
}

/* Navigation Buttons */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  font-size: 24px;
}

.carousel-btn.prev {
  left: 10px;
}

HTML 代码 #

<!-- Carousel 2 -->
<div class="image-item">
  <div class="carousel">
    <div class="carousel-container">
      <div class="image-wrapper">
        <div class="carousel-counter">1 / 4</div>
        <div class="carousel-slides">
          <div class="carousel-slide active">
            <img src="https://i.ibb.co/MP25TzB/Chris-and-Anna-1-copy.webp" alt="Beautiful skies with some sunshine" />
            <h3>Chris and Anna</h3>
            <p>Forever starts here 💍</p>
          </div>
          <div class="carousel-slide">
            <img src="https://i.ibb.co/JR0SjM1/Chris-and-Anna-2-copy.webp" alt="Beautiful skies with some sunshine" />
            <h3>Chris and Anna</h3>
            <p>Two hearts, one promise ❤️</p>
          </div>
          <div class="carousel-slide">
            <img src="https://i.ibb.co/CtG7B4z/Chris-and-Anna-3-copy.webp" alt="Beautiful skies with some sunshine" />
            <h3>Chris and Anna</h3>
            <p>Brothers, united for the big day 🧑‍⚕️‍♂️</p>
          </div>
          <div class="carousel-slide">
            <img src="https://i.ibb.co/vqcxBG0/Chris-and-Anna-4-copy.webp" alt="Beautiful skies with some sunshine" class="vertical" />
            <h3>Chris and Anna</h3>
            <p>Her squad, his crew, together for the love of two 👩‍⚕️🧑‍⚕️‍♂️</p>
          </div>
        </div>
      </div>
      <button class="carousel-btn prev">❮</button>
      <button class="carousel-btn next">❯</button>
      <div class="carousel-dots">
        <span class="dot active"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </div>
    </div>
  </div>
</div>

备注：内容来源于stack exchange，提问作者Lenzfler Studio