Dwell on the positioning in CSS

CSS elements by default in accordance with normal flow arrangement, there are two cases can change the arrangement of elements, one way is floating, in the previous article has been elaborated in detail, and the other is now to discuss the positioning of the property Position,position property has four values, Static, relative, absolute, fixed, positional elements control the position of the positioned element through the property left and top, which by default is 0. We will use and differentiate between the four attribute values in the following sections.

I. Static (stationary positioning)

Static is the default value for the Position property. Indicates no positioning and the element appears in a normal stream.

Two. Relative (relative positioning)

Creates a relative positioned element, positioned relative to its normal position.

See the following examples:

HTML code:

<p class= "Father" >    <p class= "Son" >son</p></p>

CSS code:

. father{    width:500px;    height:500px;    Background:pink;    margin:0 Auto;}. son{    width:200px;    height:200px;    Background:lavender;    margin:0 Auto;}

The effect is as follows:

Code explanation: Normally, p in class named son appears in the following area, and below is an attempt to position the element relative to it:

CSS code:

. son{    width:200px;    height:200px;    Background:lavender;    margin:0 Auto;    position:relative;    left:0;    top:0;}

The effect is as follows:

It can be found that the above case has not changed after the relative positioning, because the relative is positioned relative to its own position and is not separated from the document flow, in fact if an element is set relative to the position and given to the left:0;top:0; There is no effect on the element after that. Let's continue to see what happens if the left and top values are not 0:

CSS code:

. son{    width:200px;    height:200px;    Background:lavender;    margin:0 Auto;    position:relative;    left:50px;    top:20px;}

The effect is as follows:

Effect Explanation:

The Red Line box is where the element itself should exist, because the property left is 50px and the property top is 20px, so the position of the element itself (that is, the position of the red box) is offset 50px to the right, and the position of 20px is offset upward.

Three. Absolute (absolute positioning)

First, the absolutely positioned element is out of the document flow, and secondly, we analyze what the absolute positioning element is based on, and the absolute positioning element first locates its parent element with the nearest location (except static), and if no parent element is positioned, it will go up until the root element html, That is, an absolutely positioned element is positioned relative to the HTML if the parent element is not positioned.

Let's look at the following examples:

HTML code:

<p class= "Father" >    <p class= "Son1" >son1</p>    <p class= "Son2" >son2</p></p >

CSS code:

. father{    width:500px;    height:500px;    Background:pink;    margin:0 Auto;}. son1{    width:150px;    height:150px;    Background:lavender;    margin:0 20px;    Position:absolute;    left:0px;    top:0px;}. son2{    width:150px;    height:150px;    Background:skyblue;    margin:0 20px;    Position:absolute;    left:0px;    top:0px;}

Effect

Effect Analysis:

The absolutely positioned element is out of the document flow, and the back is positioned to cover the front, so the son2 is covered in the son1. Son1 and Son2 do not locate the parent, so they are positioned relative to the root element HTML. If there is a positioning element and what happens, look at the following code:

CSS code:

. father{    position:relative;    width:500px;    height:500px;    Background:pink;    margin:0 Auto;}. son1{    width:150px;    height:150px;    Background:lavender;    margin:0 20px;    Position:absolute;    left:0px;    top:0px;}. son2{    width:150px;    height:150px;    Background:skyblue;    margin:0 20px;    Position:absolute;    left:50px;    top:50px;}

The effect is as follows:

Effect Analysis:

Father is the parent of Son1 and Son2, so Son1 and Son2 are positioned relative to father because Son2 is later positioned so son2 is covered by Son1. Relative positioning is often used as a containment box for absolute positioning because of the relative positioning characteristics.

Four. Fixed (stationary positioning)

Many times the page needs to use fixed positioning, such as the bottom right corner of the page back to the top button. Fixed positioning means that the element is always fixed in this place according to the size of the browser window, even if the page slides, does not affect its position. Let's look at the following examples:

HTML code:

<body>    <p class= "Backtop" >top</p></body>

CSS code:

body{    height:2000px;    Background: #C0C0C0;}. backtop{    width:70px;    height:70px;    Background:pink;}

The effect of the page without positioning is as follows:

Give the button a fixed positioning, as follows:

CSS code:

. backtop{    width:70px;    height:70px;    Background:pink;    position:fixed;    right:30px;    bottom:30px;}

The effect is as follows:

Even as the page scrolls, the position of the button does not change. Many ad areas on the page, even if the page scrolls, the location of the ad is always there, which is also achieved using fixed positioning. Note that fixed positioning elements are also out of document flow.

Five. Summary

In the case of floating, we only need to consider from two aspects, on the one hand, the positioning element according to what to locate the problem, on the other hand, whether the positioning element is out of the document flow problem (about out of the document flow problem is not elaborated here). As long as these two aspects are thoroughly understood, it is easy to understand the positioning, and we will summarize the following several positions:

　　

Position:static (static positioning) fixed (fixed positioning) relative (relative positioning) absolute (absolute positioning)

The default value of Static:position, which is equivalent to no positioning. Occupy page space without leaving the document stream.

Relative: Position relative to its position. Occupy page space without leaving the document stream.

Absolute: The position is relative to the positioned parent element. Out of the document stream, not occupying page space.

Fixed: The position is relative to the browser window. Out of the document stream, not occupying page space.

More about positioning related articles in CSS please follow topic.alibabacloud.com!

