I am currently working on creating a modal window using HTML/CSS. My goal is to have the modal window fixed in position relative to the browser window, with a white background. Inside the modal, there will be an image at the top and a div element at the bottom for description text. I want to position the child div so that it has a left offset of approximately 8.33% of the width of the parent.
Initially, I tried absolute positioning for the child div, but then the background of the parent modal did not extend to cover the child div:
To see the issue, check out this link: https://i.stack.imgur.com/6SDHW.jpg
Here is the HTML/CSS code for reference:
<div class="modal col-4 l-offset-4" id="robot-modal">
<img src="media/robot_modal.jpg">
<div class="col-10 l-offset-1">
</div>
</div>
CSS code:
.col-10 {
width: 83.33333%;
}
.l-offset-1 {
left: 8.33333%;
}
.modal {
@include align-vertically(fixed);
display: none;
z-index: 2000;
background: white;
img {
width: 100%;
}
div{
position: absolute;
background-color: blue;
height: 100px;
}
}
However, changing the child div's position to 'relative' resolved the issue:
You can see the correct display here: https://i.stack.imgur.com/SMisG.jpg
I'm still unsure why I need to use relative positioning for an element inside a fixed parent. According to this article: , if we want to position an element relative to its immediate parent, the parent should be either absolutely or relatively positioned with the child as absolutely positioned. So why does adjusting the offset of a relatively positioned child work in my case? I also prefer not to assign a height to the parent modal as I want it to dynamically adjust when new elements are added.