Archive for 'Types of positioning' Category

Types of positioning

By Steve Monas - Last updated: Monday, June 14, 2010

While this default “flow” does not give the designer much scope for manipulating layouts, CSS allows the designer to apply a small set of attributes to the elements of the page and control their position by defining coordinates within which they will appear. CSS 1 provided the user with the ability to specify: The width [...]

Static positioning

By Steve Monas - Last updated: Monday, June 14, 2010

Static positioning is the default positioning of elements on the page. It sources the element as in the HTML and places them linearly one after another. The elements cannot be repositioned and do not have defined coordinates for the element’s position. However, the <body> element is positioned and provides the coordinates for the child elements [...]

Relative positioning

By Steve Monas - Last updated: Monday, June 14, 2010

Relative positioning is similar to static positioning in that the elements are part of the flow. However, they differ from static positioning in that they can be moved around relative to the position they would normally occupy. For instance, if an object would normally appear at top =10 and left =10 and the object ‘s [...]

Absolute positioning

By Steve Monas - Last updated: Monday, June 14, 2010

We will deal with absolute positioning very briefly here as we propose to devote a whole section to it a little later in this tutorial. Absolute positioning positions the element in a fixed point within its container. It cannot be moved from its position. The top and left declarations determine its position. The element then [...]

Fixed positioning

By Steve Monas - Last updated: Monday, June 14, 2010

Fixed positioning is often regarded as a subset of absolute positioning. Like the containing boxes of absolutely positioned elements, the boxes of the fixed positioned elements are independent. However, the placement is different. Instead of localizing the element on the body of the page, the element is allowed to flow with the dimensions of the [...]

Floats

By Steve Monas - Last updated: Monday, June 14, 2010

Floats are not regarded as part of element positioning. However, it is mentioned here as they are often referred to as a method of positioning the element on a web page and is fast becoming a layout tool that web designers are experimenting with. Often, floats are used with statically positioned elements and when an [...]