CSS NOTES 2 : Positioning

CSS NOTES 1 : Basics, Properties and Units | CSS NOTES 2 : Positioning

Like the elements contained within it, the window has a width and height, as well as a top, bottom, left and right. You can think of the browser window as being the parent of all other elements.

All absolutely positioned elements in the window are positioned either directly (if not nested in another element) or indirectly (if nested in another element) relative to the origin of the live window area, which is the top-left corner of the display area in browser windows.

An element with position:absolute contained within an element with position:relative will base its position on the edges of that parent element, not on the edges of the browser window.

All relatively positioned elements in the window are positioned relative to the top-left corner of the area where they would have appeared if they had been left alone(also referred to as their normal place in the flow.

Types of CSS Positioning(from your book)
Name	How it works	Example
Static	Flows the content inline(one after the next), but position of element can't be touched.	.stat {position: static; font: bold 28pt courier; color: #cccccc;}
Relative	Flows the content inline(one after the next), but allows you to move the element around within the elements natural position on the screen.	.rel {position: relative; top: 70px; left: 25px;}
Absolute	Element is placed independently of other elements on the screen in a specific position in the window (or the parent element if it is nested).	#abs {position: absolute; top: 25px; left: 375px; width: 100px;}
Fixed	Works almost like absolute positioning. Element is placed independently of other elements on the screen in a specific position in the window. The difference is that when a page scrolls in the window, fixed elements srtay in their initial positions and do not scroll.	#fix {position: fixed; top: 10px; right: 5%; width: 125px;}

Go to W3C positioning info

W3C Positioning info (from W3C website)

9.3.1 Choosing a positioning scheme: 'position' property

The 'position' and 'float' properties determine which of the CSS2 positioning algorithms is used to calculate the position of a box.

'position'

Value:	static \| relative \| absolute \| fixed \| inherit
Initial:	static
Applies to:	all elements, but not to generated content
Inherited:	no
Percentages:	N/A
Media:	visual

The values of this property have the following meanings:

static

The box is a normal box, laid out according to the normal flow. The 'left' and 'top' properties do not apply.

relative

The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.

absolute

The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

fixed

The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. In the case of continuous media, the box is fixed with respect to the viewport (and doesn't move when scrolled). In the case of paged media, the box is fixed with respect to the page, even if that page is seen through a viewport (in the case of a print-preview, for example). Authors may wish to specify 'fixed' in a media-dependent way. For instance, an author may want a box to remain at the top of the viewport on the screen, but not at the top of each printed page. The two specifications may be separated by using an @media rule, as in:

   

@media screen { 

  H1#first { position: fixed } 

}

@media print { 

  H1#first { position: static }

}