I am experiencing an issue with positioning child elements within a parent element. The parent element is relatively positioned, while the two child elements are absolutely positioned to be in the top left and top right corners. However, despite having explicit heights and widths set for both child elements, they are not appearing in the DOM. I have also attempted adjusting the z-index values with no success.
Below is the relevant markup and CSS:
.first_customer, .all_customer {
flex: 1 1 0;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.inner {
text-transform: uppercase;
width: 100%;
}
.inner > * {
margin: 20px auto;
background-color: #fad63a;
padding: 7px;
border-radius: 3px;
box-shadow: inset 0 0 10px #000;
border: 1px solid #fff;
text-align: center;
width: 85%;
}
.inner > h4 {
font-size: 10px;
}
.inner > h6 {
font-size: 10px;
}
.inner > p {
font-size: 10px;
}
.topleftcorner, .toprightcorner {
position: absolute;
min-width: 100px;
min-height: 100px;
}
.topleftcorner {
top: 0;
left: 0;
z-index: 2;
}
<div class="first_customer">
<div class="topleftcorner"></div>
<div class="toprightcorner"></div>
<div class="inner">
<h4>New Customers</h4>
<h6>$10 Gift</h6>
<p>Dry Cleaning</p>
</div>
</div>