CSS Layout - The position Property

CSS Position

I use the position: property in my menus, position: fixed for the Bottom Navbar and position: relative in a cascading menu that I was looking at.

What W3C say:

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

position: fixed

I have added a fixed div on this page and have fixed the left menus on my responsive designs. The header div is also fixed on the older version. This means that an Id Selector cannot be used on it.

This element has position: fixed;

position: sticky

A sticky element will stay in the same position even if the screen is scrolled off the screen.

I am sticky!

It should stop at the top of this screen when the page is scrolled. The menu on the left of this page is fixed and should appear in the same position. 

style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
/style>

That is if there is enough content on the page to get it there

position: absolute

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

This div element has position: relative;
This div element has position: absolute;
div.absolute {
  position: absolute;
  top: 60px;
  right: 10px;
  width: 400px;
  height: 100px;
  border: 3px solid #73AD21;
  padding: 10px;
}

The h1 tag on the modified rwd.css file for older pages where I made the exiting left menu fixed is postioned relative to the top of the viewport as I made the header position:fixed. See the Box Sizing page

Links

External Sources

The position Property