css summary??position_html/css_WEB-ITnose

CSS (Cascading Style Sheet), translated in Chinese as Cascading Style Sheet, is a markup language used to control web page styles and allow the separation of style information from web page content. In the CSS control page, there are four main styles: inline style (the style attribute nests the CSS in the p tag), inline style (in the HTML part, no CSS code is used, but the CSS code is modified in the style Nested), link style (use link statement to import external css into the page) and imported styles.

In style design, there is a very key attribute??position

There are many attributes in CSS that are used Positioning, this also provides basic support for us to use DIV CSS layout to replace the ancient tabel layout.

Bottom: Defines the offset between the bottom margin boundary of the positioned element and the bottom boundary of its containing block.
clip: Set the shape of the element. The element is clipped into the shape and then displayed.
                            left: Defines the offset between the left margin boundary of the positioned element and the left boundary of its containing block.
Overflow: Sets what happens when the content of an element overflows its area.
Position: Place the element in a static, relative, absolute, or fixed position.
Right: Defines the offset between the right margin boundary of the positioned element and the right boundary of its containing block.
Top: Defines the offset between the top margin boundary of a positioned element and the top boundary of its containing block.
Vertical-align: Set the vertical alignment of the element.

z-index: Set the stacking order of elements.

The concept of the key and easy to confuse for beginners is the Position attribute:

STATIC default: The position setting is the position set to be the position set to be the position set. A static element will always be at the position given by the page flow (static elements ignore any top, bottom, left or right declarations).

Relative:

The position is set to the element of Relative, which can be moved to a place where it is relative to its normal position. Therefore 20 pixels position.

Absolute:

An element whose position is set to absolute can be positioned at specified coordinates relative to the element containing it. The position of this element can be specified via the "left", "top", "right" and "bottom" attributes.

fixed:

Elements whose position is set to fixed can be positioned at specified coordinates relative to the browser window. The position of this element can be specified via the "left", "top", "right" and "bottom" attributes.

No matter whether the window is scrolled or not, the element will stay in that position. Works in IE7 (strict mode). These attributes are the cornerstone of DIV layout. Due to different browsers, there are also differences in the box mode. For example, the width and height of the box are defined differently in different browsers. IE6 includes borders and padding, while FF only refers to the width of the content.

Differences in details are often something we can sum up in our daily work. So don't worry too much. Understand the use of simple css, and improve and gain a deeper understanding in the process of continuous application. A brief summary of the position. If there are any errors, please point them out. Thank you very much! !