InternetingIsHard Part 4 – Moving Boxes: Advanced CSS Positioning

Part 4 of Interneting is Hard.

You can read the previous posts here.

1.  Relative positioning accepts negative values as well
     position: relative;
     top: -30px;
     left: -30px;

2. Absolute and fixed positioning completely removes an element from the normal flow of the page.
3. Absolute positioning can be made relative by adding this code:

   .absolute {
     position: relative;
   }

   

4. fixed positioning element doesn’t scroll.
5.  a refresher on using child-selector (>)

6. .menu > li:last-of-type {
     margin-right: 0; // after creating right margins in li, set last li to 0 margin to create in between margins.

7. z-index (position: relative; isrequired because only positioned elements pay attention to their z-index property.)