CSS deals with HTML elements as they are existed in boxes. These boxes can be appeared as a block-level or inline box . For the block-level, it starts in a new line while the inline box can flow surrounding texts.
| position type | attribute | function |
|---|---|---|
| normal flow | position: static |
it’s the normal state for element position |
| relative positioning | position: relative |
it moves the element relative to its normal position |
| absolute positioning | position: absolute |
the surrounding elements located as the element isn’t there |
| fixed positioning | position : fixed |
it fixes the element in its place |
| floating elements | float : right |
it allows the element to flow to the far right/left and the other elements flow around it |
For the fixed position, next elements can appear on the top of the fixed element using the overlap property by using z-index: 5 for example.
when float is done for an element, the next elements will be affected. To stop the influence for floating element to the next elements, clear attribute is used in CSS as in the following:
clear: lfetclear: rightclear: bothclear : none
For a web page, its layout should be appropriate for different screen sizes. Screen resolution is number of dots per inch. It must be noted the higher the resolution the smaller the text appears. Web developers try to create pages of around 960 – 1000 pixels wide. There are two types of layout:
- fixed width layout : the web page layout width doesn’t change as the user screen size change
- liquid layout : the web page layout width will be adapted to the user screen size