Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

CSS Positioning

Solid understanding about CSS Positioning.

  • Inicia sesión para ver los comentarios

  • Sé el primero en recomendar esto

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/

×