Below is a very basic code example to consider:
<div id="parent">
<div id="child">
Test it
</div>
</div>
This code snippet includes the following CSS styles:
#parent{
position:relative;
margin-left:200px;
color:#FFF;
}
#child{
position:fixed;
top:30px;
background-color:red;
}
I assumed that the child div wouldn't inherit the margin-left property from its parent div due to breaking the normal flow. Surprisingly, not only does it inherit the 200px margin, but when attempting to assign a left margin of 50px to the child div, the result shows a total left margin of 250px! Why does this happen and how can I change it?
Thank you
Find the Jsfiddle link here: http://jsfiddle.net/rCMx2/