I designed a rectangle using position: relative; and placed an icon inside it. However, when I added a new div class called .Home, and included an element <h4>Home</h4> with position: relative;, the element appeared outside of the rectangle. What am I missing?
I attempted to modify the position value, but the issue persists.
.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>