Tags for this article: cascading style sheets, css float, css layout, css position, CSS Position Properties, css positioning, css tutorial
Two models float and position
On the WebPages, there are 2 models for positioning the content. Both the models are valid and it is always best to use two models to layout the WebPages with CSS.
Float
Float takes out the element from the normal flow of the WebPages and has many other elements around it. It is seems confusing to use CSS for layout at first but is can satisfy you once it is completely understood.
Position
When people think of CSS positioning, position is the one that is thought by everyone. This defines whether the element is in fixed, absolute, relative or static position.
CSS Position Properties
As it is mentioned above, if you have decided to position the pages within the position property, you need to use at least one of the style properties in order to define where the elements should be placed.
Bottom
The element should be placed at the location up from bottom of the browser. One thing that is to be noted is, if the negative values are used in these positions, you have to move the elements in opposite location.
Left
The element can be placed over from the right side of the window.
Right
The element can be placed from right side of the window.
Top
The element can be placed down from top of the window.
CSS Positioning – it is not Really Alignment
There were no many ways to position the items on the screen when HTML came first. Few of them were the align attribute that allowed to position the element related to its current position. In favor of the style sheets, the attribute has been deprecated. There are two attributes and among that, only one works for the text.
Text-align
This does all the things that you would expect from an align-attribute. It helps you to align the text to center, right and even justify. However, this works only with the text.
Vertical-align
This allows you to align the inline element to baseline top, bottom, middle and many other positions.
Position the Things on Top one after another
When positioning the elements, there are some chances that one element will overlap another. On the normal course of events, browser will put up the thing that comes first at the bottom. However, with Z-index property, you will be able to push the elements to other location
Z-index
This defines the stack order of the elements.
After positioning, give shape to elements
In order to define the shape of the elements, there are two properties. The content in the element is clipped so that it fits the shape.
Clip
Shape of the element is defined by clip. Usually, this amounts to height and width of the rectangle. If the content is longer, then it will be clipped.
Overflow
This tells the browser that, what should be done if the content is not fitted in the area that is clipped. The content can be hidden and it can be continued as usual.