How to prevent absolutely positioned img from moving - html

Question

So I have a flexbox with some elements and over the flexbox, I want to put a foreground which should be absolutely positioned. What I am trying to achieve is, that with window resize, the foreground will change its size but not its position. Currently, when the window is small, the image is moving up.
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>
LOREM IPSUM
</div>
</div>
</div>
</section>

Answer 1

Your absolutely positioned img.heroForeground has it's top set to 8vh which will change as the window size changes during resize. This is leading to the unwanted shifting during window resize. Instead, center the element using transform/translate.
div img.heroForeground {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
…
}
Demo
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>
LOREM IPSUM
</div>
</div>
</div>
</section>
jsFiddle