CSS Positioning position Usage Introduction

The position option defines the positioning properties of an element with 5 optional values: Static, relative, absolute, fixed, inherit

Property values are relative, absolute, fixed top | Left | Right| Bottom | Z-index to work.

Static (default value)

Relative (relative positioning)

Absolute (absolute positioning)

Fixed (absolute positioning, absolute with window browser, low version browser not supported such as IE6 and IE7)

Relative and static are relative to the other elements of the document positioning, are relative positioning category, the difference is that one can control the displacement, one can not

Static (default value)

If you use default values, defining top, left, right, bottom, z-index for elements in CSS will not take effect

Relative

The relative is the same as the default, except that it can be used to control offsets relative to other normal positions by setting offsets and z-index.

All element positioning (Positon) defaults are static, nothing is relative positioning, and using position:relative is the same as the default value without setting Topp, left, Z-index, right, bottom values.

Absolute and fixed

Characteristics:

1. The width of block-level elements is no longer 100% when undefined, but is automatically adjusted based on content

2. In the case where Z-index is not defined, the Absoulte element is overwritten with other elements.

3, it will be out of normal document flow, no longer occupy space, similar to the effect of floating

Absolute is an absolute position relative to the previous parent element that is not static. If you do not specify a parent element, the Position,absolute will be absolutely positioned relative to the entire HTML document.

Fixed

Generates an absolutely positioned element that is positioned relative to the browser window. That is, regardless of how the page scrolls, the element always stays somewhere on the screen. If we want the left side control bar to always be visible to the user, use Position:fixe to locate it.

What to do if IE6 and IE7 do not support the fixed attribute

Solutions

With Position:absolute

_top:expression (eval (document.documentElement.scrollTop))