Как предотвратить перемещение абсолютно позиционированного img - PullRequest
Новая
       69

Как предотвратить перемещение абсолютно позиционированного img

0 голосов
/ 04 марта 2020

Итак, у меня есть flexbox с некоторыми элементами, а поверх flexbox я хочу поставить передний план, который должен быть абсолютно позиционирован. Я пытаюсь добиться того, чтобы при изменении размера окна передний план изменял свой размер, но не положение. В настоящее время, когда окно маленькое, изображение движется вверх. 

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>

1 Ответ

0 голосов
/ 04 марта 2020

Ваш абсолютно позиционированный img.heroForeground имеет top, установленный на 8vh, который будет меняться при изменении размера окна при изменении размера. Это приводит к нежелательному смещению при изменении размера окна. Вместо этого отцентрируйте элемент, используя 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

...