如何防止绝对定位的图片移动

Question

所以我有一个带有一些元素的 flexbox，在 flexbox 之上，我想放置一个应该绝对定位的前景。我想要实现的是，通过 window 调整大小，前景将改变其大小但不会改变其位置。当前，window 较小时，图像向上移动。

main div.heroBoxContainer {
  display: flex;
  display: -ms-flexbox;
  height: inherit;
  margin: 0 auto;
  max-width: 1280px;
  padding: 0;
  position: relative;
  z-index: 4;
  align-items: center;
}

main div.heroBoxContainer .hGroup {
  color: white;
  display: block;
  height: auto;
  margin: 0 0 0 0;
  width: 100%;
  z-index: 5;
}

div.heroBoxContainer h1.heroHeadline,
div.heroBoxContainer h1.heroHeadline {
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.5rem;
  margin: 0 0 0 10rem;
  transform: skew(-6deg) rotate(-6deg);
}

div.heroBoxContainer p.subHeadline {
  font-size: 4rem;
  font-weight: bolder;
  margin: 0rem 0 0 10rem;
  transform: skew(-6deg) rotate(-6deg);
}

div.heroBoxContainer p.priceHeadline {
  font-size: 4rem;
  font-weight: bolder;
  margin: 0rem 0 8rem 10rem;
  color: rgba(255, 220, 58, 1);
  transform: skew(-6deg) rotate(-6deg);
}

div img.heroForeground {
  position: absolute;
  top: 8vh;
  right: 0;
  max-width: 80%;
  z-index: 2;
  left: 15vw;
}

#carousel {
  overflow: hidden;
  white-space: nowrap;
  width: 100vw;
  height: 75vh;
  position: relative;
}

.slide-image {
  width: 100vw;
  height: 75vh;
  background-position: center;
  display: inline-block;
  background-size: cover;
  position: relative;
}

<section id="carousel">
  <div class="slide-image" id="slide1">
    <div class="heroBoxContainer">
      <img src="https://www.cheopstech.cz/wp-content/uploads/2017/06/placeholder-3.png" class="heroForeground">
      <div class="hGroup">
        <h1 class="heroHeadline">LOREM IPSUM<br> DOLOR SIT AMET</h1>
        <p class="subHeadline">LOREM IPSUM:</p>
        <p class="priceHeadline">LOREM IPSUM</p>
        <a href="/" class="btnCta mobileGetReg triggerGetReg">LOREM IPSUM</a>
      </div>

    </div>
  </div>
</section>

Answer 1

您的绝对定位 img.heroForeground 已将其 top 设置为 8vh，这将随着 window 尺寸在调整大小时的变化而变化。这导致在 window 调整大小时发生不必要的移动。相反，使用 transform/translate.

将元素居中

div img.heroForeground {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  …
}

演示

main div.heroBoxContainer {
  display: flex;
  display: -ms-flexbox;
  height: inherit;
  margin: 0 auto;
  max-width: 1280px;
  padding: 0;
  position: relative;
  z-index: 4;
  align-items: center;
}

main div.heroBoxContainer .hGroup {
  color: white;
  display: block;
  height: auto;
  margin: 0 0 0 0;
  width: 100%;
  z-index: 5;
}

div.heroBoxContainer h1.heroHeadline,
div.heroBoxContainer h1.heroHeadline {
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.5rem;
  margin: 0 0 0 10rem;
  transform: skew(-6deg) rotate(-6deg);
}

div.heroBoxContainer p.subHeadline {
  font-size: 4rem;
  font-weight: bolder;
  margin: 0rem 0 0 10rem;
  transform: skew(-6deg) rotate(-6deg);
}

div.heroBoxContainer p.priceHeadline {
  font-size: 4rem;
  font-weight: bolder;
  margin: 0rem 0 8rem 10rem;
  color: rgba(255, 220, 58, 1);
  transform: skew(-6deg) rotate(-6deg);
}

div img.heroForeground {
  position: absolute;
  max-width: 80%;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#carousel {
  overflow: hidden;
  white-space: nowrap;
  width: 100vw;
  height: 75vh;
  position: relative;
}

.slide-image {
  width: 100vw;
  height: 75vh;
  background-position: center;
  display: inline-block;
  background-size: cover;
  position: relative;
}

<section id="carousel">
  <div class="slide-image" id="slide1">
    <div class="heroBoxContainer">
      <img src="https://www.cheopstech.cz/wp-content/uploads/2017/06/placeholder-3.png" class="heroForeground">
      <div class="hGroup">
        <h1 class="heroHeadline">LOREM IPSUM<br> DOLOR SIT AMET</h1>
        <p class="subHeadline">LOREM IPSUM:</p>
        <p class="priceHeadline">LOREM IPSUM</p>
        <a href="/" class="btnCta mobileGetReg triggerGetReg">LOREM IPSUM</a>
      </div>

    </div>
  </div>
</section>

jsFiddle

如何防止绝对定位的图片移动

How to prevent absolutely positioned img from moving

html

css

image

css-position

flexbox