Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Positioning

Solid understanding about CSS Positioning.

  • Login to see the comments

  • Be the first to like this

CSS Positioning

  1. 1. CSS Positioning Ruby Nguyen - nthngoc277@gmail.com
  2. 2. What is CSS positioning? The CSS positioning properties allow you to position an element.
  3. 3. Normal Flow
  4. 4. Static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set.
  5. 5. Absolute Absolute positioning allows you to remove an object from the typical flow of the document and place it at a specific point on the page. Example: http://codepen.io/nthngoc277/pen/ZYjNwv
  6. 6. Relative Relative positioning works similarly to absolute positioning in that you can use top, bottom, left and right to scoot an object to a specific point on the page. The primary difference is the origin or starting point for the element. With absolute positioning, the starting point was at the very top left of the browser window. With relative positioning starting point is where it normally lies in the flow of the document. Example: http://codepen.io/nthngoc277/pen/ZYjNwv/
  7. 7. Fixed An element with a fixed position is positioned relative to the browser window, and will not move even if the window is scrolled.
  8. 8. Inherit Inherit - it’s pretty self explanatory
  9. 9. Relative and Absolute What position: absolute; really does is position the element relative to its first non-statically-positioned ancestor. Example: http://codepen.io/nthngoc277/pen/dPjBbB
  10. 10. Reference http://designshack.net/articles/css/5-steps-to-drastically-improve-your-css-knowledge-in-24-hours/

×