Css:position positioning properties and application summary of examples

Position Positioning Properties

CSS position is a very important property, it has absolute (absolute positioning), relative (relative positioning), static (stationary positioning, default), fixed (stationary positioning) four kinds. With the Position property, we can have the element offset from its normal position, the parent element, or the browser window. Postion is also a property of beginners who are prone to unclear situations. Currently, almost all major browsers support the position attribute, and in the following article we will talk about the position positioning attribute and its application in CSS.

You can learn the free course of the PHP Chinese web first

1. Learn the positioning section of the basic CSS Tutorial in Html+css Basics Tutorial

2. Watch CSS Positioning video tutorial in the "Learn CSS video tutorial"

Position positioning related applications

1. In-depth understanding of position properties in CSS

Absolute positioning is completely taken out of the document stream, and the space occupied by the element is recycled. The positioning of an absolutely positioned element depends on its positioning context.
It is important to note that absolute positioning can be used to make inline elements a representation of block-level elements. But be sure that once the inline element is absolutely positioned, the position of the element is not good, (cause: If the element does not have an internal and external margin, and there is no absolutely positioned element around the left and right side, then the element will temporarily remain in its original position, but if the element is set with margins, Then the element will temporarily remain in the distance from the original position of an outer margin. If he or she is setting an absolutely positioned element, then the element will look for the topmost element that is not absolutely positioned. < have no regrets to hear the reason >) so, a little bit that set the absolute positioning needs to immediately for the element top, left positioning.

2. Parsing the difference between relative and absolute in the position of CSS

Position has the following properties: Static, Inherit, fixed, absolute, relative
The first three good understanding good differentiate:
Static: Is the default state, there is no positioning, the element appears in the normal stream (ignoring top, bottom, left, right or Z-index declaration).
Nherit: Inherits the value of the Position property from the parent element.
Fixed: Generates an absolutely positioned element that is positioned relative to the browser window. (That is, when scrolling the browser, the element is permanently displayed in a location in the window's viewable area).

3. CSS Positioning position Usage Introduction

Absolute and fixed features:

The width of a, block-level element is no longer 100% when undefined, but is automatically adjusted according to the content

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

C, 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.

4. Description of the positioning method using the Position property in CSS

A static positioned element ignores all top,right,bottom,left and the values declared by the Z-index property. In order for your element to be able to use these five attributes, you need to apply one of these three values for its Position property first: The Absolute,relative,fixed,position value is the same as the inherited value of all other properties for the inherit element. The position element inherits the parent element's value.

5. Summary of the four ways to locate position in CSS

Out of standard document flow

Features: (1) If this element does not have a parent element, then the future top, left, right, and bottom are positioned relative to the browser window

(2) If an absolutely positioned element has a parent element, but the parent element has no relative positioning, then the top, left, right, or bottom are positioned relative to the Browse window.

(3) If an absolutely positioned element has a parent element, and the parent element has a position (not static), then this absolutely positioned element offset is based on its own parent element

(4) An absolutely positioned element will not occupy a position on the page

6. CSS position positioning and float float

A. If there is a default 100% width of p, once added absolute absolute positioning, the element is immediately inline-block, the default width will be adapted to the inner width of the element, causing the width and height of the page collapse.

B. Due to the absolute absolute positioning flexibility, for ordinary page layout, sometimes for the sake of easy to cause absolute/relative/top/left/z-index abuse, which will cause later expansion and maintenance of trouble

Related questions

1. No position:absolute how to achieve similar functions

2. Mobile end position:fixed; compatibility issues

3. CSS section position fixed Web page problem pure CSS pull-down

4. How can I move around with the browser after the DIV has set the Position:fixed property?

"Recommended"

1. PHP Chinese Web Free Tutorial: "CSS 0 Basics Primer Tutorial"

2. PHP Chinese Web free video tutorial: "Php.cn lonely Nine Cheap (2)-css video Tutorial"