Positioning an image in a 100vh box - html

Question

I've been looking around for some time but couldn't find a solution.
So I'm working on a Personal portfolio with different sections (height: 100vh;). The problem I have is that I'm unable to position the images within the section itself (I want the image of the pinguïns to be positioned like the first lion image. But in the section below.). Can someone help me with this? (I'm using a bootstrap grid)
Code:
.section-1 {
background: radial-gradient(#2d2d2d, #1a1a1a);
height: 100vh;
}
.section-2 {
background: #fc6621;
height: 100vh;
}
.section-3 {
background: #20468b;
height: 100vh;
}
.col-sm-6 {
height: 100vh;
}
#profile img {
display: inline;
float: right;
position: absolute;
bottom: 0;
right: 0;
z-index: 0;
}
.center {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.text {
height: 100vh;
position: relative;
z-index: 10;
}
<!-- 1st section -->
<div class="section-1">
<div id="profile"><img src="https://i.gyazo.com/4cefd23a7fdc59ac022cc46d44fe9321.jpg" width="1006" height="821"></div>
<div class="container">
<div class="row">
<div class="col-sm-6 center text">
<h1>I'm <strong>Gilles</strong></h1>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam
id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.</p>
<div class="col-sm-4 button">CONTACT ME</div>
</div>
</div>
</div>
</div>
<!-- 2nd section -->
<div class="section-2">
<div id="smartschool"><img src="https://i.gyazo.com/abdeb771b58043c53cfb08e5ffd42f6e.jpg" width="990" height="753"></div>
<div class="container">
<div class="row">
<div class="col-sm-6 center text">
<h1>I'm <strong>Gilles</strong></h1>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam
id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.</p>
<div class="col-sm-4 button">READ MORE</div>
</div>
</div>
</div>
</div>
<!-- 3th section -->
<div class="section-3">
<div id="dutchcreativestudio"><img src="https://i.gyazo.com/4cefd23a7fdc59ac022cc46d44fe9321.jpg" width="933" height="643"></div>
<div class="container">
<div class="row">
<div class="col-sm-6 center text">
<h1>I'm <strong>Gilles</strong></h1>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam
id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.</p>
<div class="col-sm-4 button">READ MORE</div>
</div>
</div>
</div>
</div>
The first one does the right thing!
But then it gets a mess (or they stack above each other)

Answer 1

position: absolute; is relative to the nearest parent. if no parents have a set position, it will be relative to the body which is what seems to be happening here.
so each 100vh section will need to have position: relative;
its also worth noting that float won't do anything on an element with absolute positioning, since position: absolute; takes the element out of the document flow.