Positioning html CSS - html

Question

I created a rectangle with a position: relative; and positioned an icon inside. But when I create a new div class called .Home and give it a <h4>Home</h4> element with position: relative; it position the element outside of the rectangle. What am I doing wrong?
I tried changing the position value but it doesn't work.
.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}
.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}
.icons {
position: relative;
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}
.fa-bars {
color: black;
font-size: 30px;
}
.Home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative
}
<div class="container">
<div class="Rec">
<div class="icons"><i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>

Answer 1

You don't need parent div to be position:relative. Check out the Codepen.
<div class="container">
<div class="Rec">
<div class="icons">
<i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>
CSS
.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}
.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}
.icons {
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}
.fa-bars {
color: black;
font-size: 30px;
}
.home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative;
}
Is this what you want?