O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

CSS Positioning

Solid understanding about CSS Positioning.

  • Entre para ver os comentários

  • Seja a primeira pessoa a gostar disto

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/