When you set an element to position: fixed; , you remove it from the "normal document flow". Imagine your site is a river, and you look from top to bottom from top to bottom. Each element is a rock in this river. Any margin that you apply to your elements is like a force field around one of these rocks.
When you set position: fixed; on one of these stones, you essentially pull it out of the river so that the stone, in fact, floats above the river in the air. Scala and the river water flow will still look the same for you, because you are up, looking straight down, but the stone no longer interacts with the river flow.
If you applied margin to this stone, this force field around the rock no longer holds water from it, because the stone hovers in the air, thanks to the position: fixed; property position: fixed; . Thus, there is no water or other stones (other elements) from which you must distance yourself. Your rock strength field (the field of your element) presses on the thin air, so nothing in the river will be affected.
But a picture is worth a thousand words, as they say:
This man doesn't really kick the Leaning Tower of Pisa, but it looks like that! In this example, the background of the image, including the Leaning Tower of Pisa, represents your page (or your "normal document flow"), and the person is an element (or stone from our last example) using position: fixed; .
Read more about the position property here and, more relevant,.
One way to fix this is to set the title to top: 20px; z-index: 2; top: 20px; z-index: 2; to make sure that it is located above and above each other element on the z plane, and then give your body position: relative; and margin-top equal to the height of the header (in this case, 52px ) plus the value of the header top property. To increase the space between your headline and your body, simply increase the amount of margin-top . This is sometimes called a “sticky approach”. Here is a demo:
body { margin: 0; padding: 0; font-family: arial; background: #5A9910; text-align: center; } div.wrap { width: 100%; margin: 0 auto; text-align: left; } div.header { position: fixed; top: 20px; z-index: 2; width: 100%; background: #ffffff; -webkit-box-shadow: 0 8px 6px -6px #333; -moz-box-shadow: 0 8px 6px -6px #333; box-shadow: 0 8px 6px -6px #333; } img.headerlogo { width: 30%; } div.contentwrap { width: 80%; height: 1600px; background: #ccc; margin: 0 auto; position: relative; margin-top: 72px; }
<div class="wrap"> <div class="header"> <p>Header</p> </div> <div class="contentwrap"> <p>Test</p> </div> </div>
PS position: fixed; - CSS property (more precisely, a pair of property values), and not an HTML attribute.