CSS: Static Positioned DIV

#blue {
width: 100px;
height: 100px;
position: static;
background-color: blue;
margin-top: 50px;
margin-left: 50px;
}

h1 {
border: 1px solid #000;
margin: 0;
}

Image 1: Using margins on a static div

Our static div responds just fine to margin settings. The values for these margins are calculated against the h1 element and the body margin/padding, in the same way as they would be with the relative div. The static div is also said to be in the flow of the page, which means its position is affected by surrounding elements. To demonstrate this, we can add a new declaration into our h1 rule. Add the margin-top property as shown.

#blue {
width: 100px;
height: 100px;
position: static;
background-color: blue;
margin-top: 50px;
margin-left: 50px;
}

h1 {
border: 1px solid #000;
margin: 0;
margin-top: 100px;
}

Image 2: Adding a top margin to the h1 element

Notice how the top margin has pushed down the h1 element. Our div, however, has maintained its positional relationship with the h1 - it is still 50px below the h1 element.