Skip to content

Latest commit

 

History

History
98 lines (73 loc) · 4.17 KB

2-positioning-lecture-notes.md

File metadata and controls

98 lines (73 loc) · 4.17 KB

Unit 1 - Box Model Positioning

Offset Properties

Positioning utilizes the four offset properties: top, bottom, left, and right.

These properties shift an element a specified distance from their original position. It is easiest to think of these properties as "Distance inward from the specified side".

.box {
    position: relative;
    top: 100px;
    left: 100px;
}

In this example, we are shifting the box element 100px inward from the top (down) and 100px inward from the left (right). This position is relative to wherever it started.

You can use any unit of measurement (px, em, rem, %) and you can use positive or negative values.

Position Properties

💡 Check out this Awesome Demo to see all of the position properties in action.

Static

  • The default. statically positioned items are part of the page flow.
  • They appear in the same order they appear in the markup.
  • The offset properties do not affect static elements.

Relative

  • Relative positioning moves an element to a new position relative to where the browser would otherwise put it.
.box {
    position: relative;
    top: 100px;
    left: 100px;
}

This example will move the box 100px downward from the top and 100px inward from the left (100px to the right) from where the broswer would place it otherwise.

  • Relative positioning does not remove an item from the document flow.
    • The browser positions the next element as though the repositioned element still occupied its pre-offset location.

Absolute

  • Absolute positioning causes the browser to move the element to a new position within a container element.
  • By default, the container is the nearest ancestor element that has a relative, absolute, or sticky position. If none exists, the <body> element is used as the reference.
.parent {
    position: relative;
}
.box {
    position: absolute;
    top: -100px;
}

This example will move the box 100px upward from where it was originally placed within its parent.

  • Absolute positioning removes elements from the normal document flow. No matter where you position it, the browser won't treat that space as occupied space.

Fixed

  • Fixed positioning sets an element to a fixed position within the browser window (a.k.a. the "viewport").
  • Similar to position: absolute: however the "parent" element is always the viewport
  • The element does not move if the user scrolls the page. (Think navigation bar at the top of a page.)
  • Fixed positioning removes element from the normal document flow.

Sticky

  • Elements with sticky positioning are weird... They behave like position: relative until they "stick" to a certain position within its nearest scrolling ancestor. Then, it behaves like position: fixed, but only as long as the parent element is visible.
<iframe frameborder="0" width="100%" height="500px" src="https://replit.com/@BenSpector/PositionSticky?embed=true"></iframe> 
.box {
    position: sticky;
    top: 10px;
}

In this example, once the box's top position reaches 10px below the top of the nearest scrolling ancestor (the <body> in this case), it will "stick" in place and behave like a fixed element and other content will flow underneath.

Z-index

The z-index property determines that order that positioned elements stack on top of each other.

  • Elements with higher z-index values will be placed on top of elements with lower z-index values:
  • z-index values are just numbers without any units.
.box1 { z-index: 3 }
.box2 { z-index: 2 }
.box3 { z-index: 1 }

In this example, the element with class box1 will be in front of box2 which is in front of box3.

Note that z-index values do not have to be sequential — there can be gaps. This is a good idea to give yourself some flexibility.