CSS Layout (ii)

The content of this section:

Position

Float

Clear

Floating Layout Example

Percent width

Position

The Position property in the CSS sets the position of the element. Property values: Static, relative, fixed, absolute.

Static

The static property is the default value. arbitrary position:static; The elements are not specifically positioned. A static element means that it will not be positioned, and an element whose Position property is set to another value means that it is positioned.

Relative

Relative behaves as static unless some additional attributes are added. Setting the top, right, bottom, and left properties on an element with relative positioning (the value of the position property relative) causes it to deviate from its normal position. Other elements do not adjust the position to compensate for the remaining space after it is offset.

Fixed

A fixed position (the value of the Position property is fixed) element is positioned relative to the window, which means that even if the page scrolls, it will remain in the same position. Like relative, the top, right, bottom, and left properties are available.

A fixed positioning element does not retain its original space on the page.

Absolute

Absolute is the toughest position value. Absoulute behaves similarly to a fixed, except that it is not relative to the browser window but rather to the nearest "positioned" ancestor element. If an element with absolute positioning (the value of the Position property is absolute) does not have a "positioned" ancestor element, it recalls the BODY element of the document, and it moves with the scrolling of the page. Note: the "positioned" element refers to an element where the position value is not static.

The relative class Div is relative positioning. If it is position:static, then its absolute positioning child element skips it directly relative to the BODY element.

Example: a page layout:

In the section filled with a lot of text, so that the container is higher than the nav element, it can work normally, if the text in the section is removed, then the container is lower than the nav element, when the nav element overflow to the outside of the container.

Float

The properties that are commonly used in another layout make float. Float lets you wrap text around a picture.

img{float:right;margin:0 0 Lem lem;width:100px;height:100px;}

Clear

The clear property is used to control floats.

In this case, the section element is actually behind the DIV (DOM structure), but the DIV element is floating on the left, so the text in the section revolves around the Div, and the sections element surrounds the entire element. What if we want section to show floating elements?

Use clear to move the section underneath the floating element div. You need to use the left value in order to clear the floating of the element. You can also use the right or both to clear the float to the left or to the right.

Overflow

When using floats, you often encounter the following scenario:

To solve this problem, introduce a new attribute: overflow

Floating Layout Example

It is common to use float completely for page layouts. This implements a layout that was previously implemented with position.

This example looks the same as the previous one. Here the overflow attribute is added to the div of the container class, even if the height of NAV is higher than container (non-floating).

Percent width

A percentage is a unit of measure relative to the containing block. It is useful for images:

Sets the width:50% of the picture, and the picture is included in the Div, as shown in.

CSS Layout (ii)