How CSS position properties are used

CSS Position Positioning Properties

This article focuses on the element's position property, which sets how elements are positioned on the page.

Directory

1. Introduction Position: Describes the value of position and the auxiliary properties.

2. Position Positioning method: Introduce position four kinds of positioning methods: absolute, relative, fixed, default.

3. Summarize position: Show position in the way of example.

1. Introduction

1.1 Description

Position Property: Specifies the positioning type of the element. This is the layout of the element out of the document flow, displayed anywhere on the page.

1.2 Primary values

①Absolute : absolute positioning; Out of the layout of the document flow, the remaining space is populated by the elements that follow. The starting position of the anchor is the closest parent element (Postion is not static), otherwise the body document itself.

②relative : Relative positioning, not out of the layout of the document flow, only change its position, in the original position of the document flow left blank area. The position of the starting position for this element that was originally in the document flow.

③ fixed: fix positioning, similar to absolute, but does not change position as the scroll bar moves.

④static : default value; default layout.

1.3 Secondary properties

The Position property simply takes the element out of the document stream, and if this element is to be displayed as desired, you need to use the following properties (Position:static does not support these):

①left: Indicates how many pixels are inserted to the left of the element, and how many pixels the element moves to the right.

②right: Indicates how many pixels are inserted to the right of the element, and how many pixels are moved to the left.

③top: Indicates how many pixels are inserted above the element, and how many pixels are moved down the element.

④bottom: Indicates how many pixels are inserted below the element, so how many pixels are moved up the element.

The value of the above property can be negative, in pixels: px.

2. Position Positioning method

2.1 Position:absolute

2.1.1 Description

absolute positioning ; Leaving the layout of the document flow, the remaining space is populated by the following elements. The starting position of the anchor is the closest parent element (Postion is not static), otherwise the body document itself.

2.1.2 View

2.2 Position:relative

2.2.1 Description

relative positioning , not out of the layout of the document flow, only changes its position, in the original position of the document flow left blank area. The position of the starting position for this element that was originally in the document flow.

2.2.2 View

2.3 position:fixed

2.3.1 Description

fixed positioning , similar to absolute, but does not change position as the scroll bar moves.

2.3.2 View

2.3.3 Application Scenarios

① Login Box Overlay: Login as DZ Forum.

② false QQ message advertisement.

2.4 position:static

2.4.1 Description

The default location , which indicates that this element is the default targeting method.

2.4.2 Application Scenarios

Special treatment of IE6.

3. Summary

3.1 Whether the scroll bar appears

When the element containing the position attribute is the most-marginal element:

①absolute and relative: The edge element that contains this 2 value, and the scroll bar appears when the browser shrinks to this element when it is not visible.

②fixed: The edge element that contains this value, and the scroll bar does not appear when the browser shrinks to this element when it is not visible.

3.2 Example

3.2.1 View

3.2.2 Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">