Why Isn't My Margin Working with Position: Fixed

Why isn't my margin working with position: fixed?

i think you have to explictly declare the position of fixed div.

div.header {
position: fixed;
width: 100%;
background: #ffffff;
top:20px;
-webkit-box-shadow: 0 8px 6px -6px #333;
-moz-box-shadow: 0 8px 6px -6px #333;
box-shadow: 0 8px 6px -6px #333;
}

and assign margin at the content div

div.contentwrap {
width: 80%;
height: 1600px;
background: #ccc;
margin: 80px auto;
}

check this fiddle if works like you need:
https://jsfiddle.net/0cmvg92m/3/

CSS position fixed AND margin 0 auto

you can make the following

#navigation {
    position:fixed;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    width: 1280px;
    height: 35px;
    padding-top: 10px;
    background-color: #000000;
}

CSS Fixed position with Auto Margin

You cant do that with margin:auto, but you can do something like this:

#CSS-SELECTOR-YOU-ARE-USING{
    background:#FF0000; // Just so you can see whats going on
    position:fixed; // Position the element
    right:50%; // Move it to the right for 50% of parent element
    margin-right:-250px; // You need here to put 1/2 of what you have below in width
    width:500px;
}

This way you move element to the right for 50%, and then move it back for half of its width. That way you get centered element with position:fixed.

How does margin of separate element affect position of fixed element?

Common issue caused by collapsing margins: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

The fix is to not use a margin, but create space another way. You could add top padding to .container and remove the margin:

http://jsfiddle.net/Zh9k8/4/

The top margin of an in-flow block element collapses with its first
in-flow block-level child's top margin if the element has no top
border, no top padding, and the child has no clearance.

If the element's margins are collapsed with its parent's top margin,
the top border edge of the box is defined to be the same as the
parent's.

Very confusing lingo, but it describe's exactly what is happening.

Fixed position but relative to container

Short answer: no. (It is now possible with CSS transform. See the edit below)

Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Edit (03/2015):

This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%). This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%) because it will be relative to the parent and not the element it's applied to. transform behaves differently. Its values are relative to the element they are applied to. Thus, 50% for transform means half the width of the element, while 50% for margin is half of the parent's width. This is an IE9+ solution

Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

If you want it to be centered, you can do that too:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Demos:

jsFiddle: Centered horizontally only

jsFiddle: Centered both horizontally and vertically

Original credit goes to user aaronk6 for pointing it out to me in this answer

How to bring content/element down when using position fixed

When you use position:fixed it takes the element out of the flow. Therefore the rest of the page starts at the top as if the fixed element doesn't even exist. This means that applying margin or any other CSS to it won't affect any other elements.

Instead you need to add space for it on the rest of the page, e.g. add padding or margin to the top of the next element, e.g.

 .introduction{
    text-align:center;
    padding: 50px 0 0;
 }

For easier maintenance, it might be better to add outer container for all pages to add this space, especially if the first element in each page is not the same e.g.

.page-container{
    padding-top: 50px;
}

And the HTML would be something like:

<div class="topnav" id="myTopnav"> ... </div>

<div class="page-container">
     ... whatever elements you have...
</div>
  

Considerations for Responsive Design: Note that if the nav wraps, then a fixed padding won't be enough - in this case you might need to look at media queries or using the hamburger menu to keep the nav bar the same height to overcome this issue.

Working Example:

* {
  font-family: Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
}

.topnav {
  overflow: hidden;
  background-color: #312E2E;
  position: fixed;
  width: 100%;
  z-index: 2;
  float: left;
}

.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.page-container {
  padding-top: 50px;
}

.introduction {
  text-align: center;
  padding: 0;
}

.introduction span {
  display: block;
  animation-fill-mode: forwards;
}

.introductionText {
  font-size: 80px;
  background: white;
  color: black;
  letter-spacing: -50px;
  font-weight: 400;
  position: relative;
  animation: text 3s 1;
}

.introductionText2 {
  font-size: 40px;
  background: white;
  font-weight: 400;
  margin-bottom: 50px;
}

.contentforscroll {
  background: lightblue;
  height: 800px;
}

<div class="topnav" id="myTopnav">
  <a href="websitecar.html"> Home</a>
  <a href="aboutus.html" class="active"> About Us</a>
  <a href="contactus.html">Contact</a>
  <a href="#about">About</a>
</div>

<div class="page-container">
  <div class="introduction">
    <span class="introductionText"> Welcome </span>
    <span class="introductionText2"> About us </span>
  </div>
  <div class="contentforscroll">
    <p>More content to make the page scroll so you see the fixed element</p>
  </div>
</div>

Why is an element with position: fixed moving with a non-positioned sibling?

With position: fixed, your header element is removed from the document flow.

The first in-flow element is main, which has margin-top: 90px in your code.

The parent of this element is body, which normally has a default margin: 8px (see HTML default style sheet).

Due to CSS margin collapsing, the body element's margin-top: 8px is collapsed with the main element's margin-top: 90px.

As a result, both elements, now having the same margin, shift down 90px.

html {    background-color: green;    height: 100%; }
body {    background-color: pink;    height: 100%;}
header {   position: fixed;   border: 1px solid red;}
main {  margin-top: 90px;  background-color:yellow;}

<header>Project Header</header> <main class="container" id="layout-mainContent">    <div class="row" id="first-row">somecontent</div></main>

---

Related Topics