Is there a way to set a div
as absolute within a specific relative div
rather than just the parent?
For instance, I have a div that's nested inside of a row. However, I would like it to be positioned absolutely in the section
instead of the row
. Both divs are styled with position: relative
due to the theme used in WordPress. If I use position: absolute
, it defaults to being absolute to the row
.
Any tips on how to work around this situation?
.section {
width: 100%;
height: 100%;
position: relative;
background: #f5f5f5;
}
.row {
width: 80%;
height: 100%;
position: relative;
background: #000000;
margin: 0 auto;
}
.content {
width: 200px;
height: 200px;
background: pink;
position: absolute;
right: 0;
top: 0;
}
<div class="section">
<div class="row">
<div class="content">
</div>
</div>
</div>