Could someone shed some light on how I can prevent the margin from one sibling div affecting another? The browser's layout seems a bit baffling to me in this scenario.
I'm attempting to position the yellow box relative to its parent, but the presence of a margin-top on the blue box is interfering with the positioning of the yellow one.
Here is the link to the code snippet
section{
position: relative;
}
div.options{
position: absolute;
left: 10px;
top: 10px;
display: inline-block;
background: #ff0;
padding: 50px;
}
div.content{
height: 100px;
width: 100%;
background: #09c;
margin-top: 50px;
}<article>
<section>
<div class='options'>
</div>
<div class='content'>
<h1>hello world</h1>
</div>
</section>
</article>