Beautiful women doing geeky stuff

CSS positioning basics - notes

Related Posts

29/08/2012 Categories: CSS

I FLOW = order of elements placed in your html/visible on your screen

II DISPLAY = ways of displaying element:

1. Block:
-has specified dimensions (w&h) (might be controlled by its content but !dimensions specified by CSS are more important)
-doesn't allow el. on the same line (even if el.1 has small width, el.2 will be displayed underneath)

2. Inline:
-takes dimensions (w&h) from its content and !ignore all dimensions specified in CSS
-displays elements in the same line: to have 2 elements displayed in the same line they both need to (1)have property "display: inline" and (2)there must be enough space (width) to fit them (if width is too small it wraps it)

3. None:
-displays nothing

III POSITIONING = where you place your element and how does it influence other elements

P.static and p.relative can be displayed as block or inlign while p.absolute and p.fixed (and floats) always block.

1. Static:
-default position of the element
-it fills in space its content needs
-offsetting doesn't do anything
-might be displayed as block or inligne depending on the elements standard display

(block: div, form input form, h1, h6, p paragraph, pre block with preformated code, table table, ul unordered list, ol ordered list, dl definition list, block quote, li list items, and dd definition list definitions

inline: a anchor, abbr abbrevation with hover, acronym works like abbr but for three-letters acronyms, em italic, img image, input form input fields, label, span, strong)

2. Relative:
-rendered element does get the width and height of the element but it doesn’t have to occupy the space designated for it = you can move it around (use propreties: top, right, bottom and left to shift it away from a designated space)
-!important! other elements from the flow see the designated space as "real" placement of the element and not the offseted one

3. Absolute:
-absolute elements are pulled out of the flow (they don't interact with other el. and elements around don't "see" it)
-use: top, right, bottom, left to offset the element nor from previous element in the flow (relative) but from the first parent element that has position relative or absolute (oif you don't have any html will be your parent element-"initial containing block")
-you can use position:absolute combine with top: and bottom: or left: and right: and like this you don't need to give width or height (default value is auto so the element will try to fill in the space

4. Fixed:
-similar to position:absolute but it takes it offset from the browser window (viewport) and not from the parent el
-enables you to fix the element in the way it stays visible when you scroll down

IV Z-INDEX (stacking elements)

-!works only on elements which also have position:relative, position:absolute and position fixed
-decides which element is visible on the top
-the higher value the more on the top element will be
-if you put z-index on the element which is inside other element which has its own z-index this z-index will be a starting point for the new element (position:relative z-index:10 position:absolute z-index:1 = will actually be 11)