i have two divs, i want to put the child on top of the parent top, i was trying but the child div got stuck outside, what is the wrong?
.content {
align-items: center;
border-radius: 4px;
display: flex;
flex-direction: column;
height: 200px;
min-height: 140px;
min-width: 140px;
border: 1px solid;
}
.topcorner {
width: 42px;
height: 42px;
background: red;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
<div class="content">
<div class="topcorner">top</div>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
Parent element needs to have position: relative
.
Add position: relative
to the parent class .content
to make the child div inside the parent div.
.content {
align-items: center;
border-radius: 4px;
display: flex;
flex-direction: column;
height: 200px;
min-height: 140px;
min-width: 140px;
border: 1px solid;
position: relative; //Add this line
}
.topcorner {
width: 42px;
height: 42px;
background: red;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
<div class="content">
<div class="topcorner">top</div>
</div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>