A comprehensive understanding of the position of CSS

Many of the other attributes of CSS are easy to understand, such as fonts, text, backgrounds, and so on. Some CSS books will also make a high-profile introduction to these simple attributes, but ignore some difficult attributes to explain, there is a suspicion of the evasive. The main attributes that are difficult to understand in CSS include box structure and positioning. As positioniseverything, this article will mainly tell about position understanding, and strive to let you after reading this article on the position has the most comprehensive understanding.

Four property values for position

Relative
Absolute
Fixed
Static

these four properties are described separately below

Copy Code code as follows:


<div id= "parent" >


<div id= "Sub1" >sub1</div>


<div id= "Sub2" >sub2</div>


</div>

1. Relative

The relative property is relatively simple, so we need to figure out which object it is to offset. The answer is its own position. In the above code, SUB1 and Sub2 are sibling relationships, and if you set sub1 a relative attribute, such as the following CSS code:

Copy Code code as follows:


#sub1


{


position:relative;


padding:5px;


top:5px;


left:5px;


}

We can understand that if you do not set the relative property, the location of the sub1 is in the normal document stream and it should be in a location. However, when the position of the set SUB1 is relative, it will be offset according to the Top,right,bottom,left value according to the position it is supposed to be, and the "relative" meaning of relative is also reflected in this.

For this, you only need to remember that sub1 if it should be where it should be if it is not set relative, once set, it will be offset where it is supposed to be. The question that follows

is, where is the location of the SUB2? The answer is where it used to be, where it is now, and its position will not change because Sub1 adds position properties.

What happens if the SUB2 position is also set to relative at this time? It is still the same as sub1, and it is offset in its original position.

Note that the relative offset is based on the upper-left side of the object's margin.

2. Absolute

This property is always misleading. said that when the position property is set to Absolute, always follow the browser window to locate, this is actually wrong. In fact, this is the characteristic of the fixed property.

When the position of the sub1 is set to absolute, who is it to offset the object? There are two scenarios:

(1) When the parent of the sub1 (or great-grandfather, as long as the parent object) parent also sets the Position property, and the Position property value is absolute or relative, that is to say, is not the default, this time sub1 is positioned according to this parent.

Note that although the object is OK, there are some details that need your attention, and that is, where do we locate the parent's anchor point? If parent sets attributes such as Margin,border,padding, the anchor will ignore the padding, which is positioned from where padding started (that is, only the upper-left corner of the padding). This is different from the idea that we would take it for granted that we would start positioning on the upper left of margin.

The next question is, where is Sub2 's location? Because when position is set to absolute, it causes sub1 to overflow the normal textFlow, just as it does not belong to the parent, it floats up, in the Dreamweaver called it "layer", in fact, meaning is the same. At this point Sub2 will get the location of the SUB1, its document flow is no longer based on SUB1, but directly from the parent.

(2) If SUB1 does not have a parent object that has a position attribute, then it is easier to understand that the body is positioned as the object, and is positioned according to the browser's window. The

3. Fixed

Fixed is a special absolute, that is, the fixed object is always anchored to the body, and is positioned according to the browser's window.
CSS position:fixed use

has been in touch with CSS for quite some time and we have not paid attention to the usage of position:fixed.

We all know the value of positioning attribute position in CSS, in addition to the default values, there are absolute,relative and fixed. I usually compare common absolute and relative, but position:fixed is not much concerned about. Perhaps because the original CSS Chinese manual to see position:fixed next to the instructions "IE5.5 and NS6 do not yet support this attribute" bar.

Some time ago, when you make a project you need to fix a layer relative to the browser's border, and then try it with position:absolute and notice that absolute is for the border of the page. Later, on the Internet, some JavaScript statements that dynamically change the values of left and top based on the movement of the scroll bar can achieve a similar effect, but when the scroll bar moves, the layer is dangling, it doesn't feel good, and wants a way to keep the layer fixed.

and look at the following code:

Copy Code code as follows:


<style type= "Text/css" >


<!--


#help {


width:30px;


height:20px;


Background-color:green;


position:fixed;


left:60px;


top:100px;


}


-->


</style>

We use this code to define a layer of "help" on the page ("id="). This will enable us to achieve the desired effect.

In IE8, Firefox, Opera, Google and other browsers to test, there is no problem, but the lower version of IE, this attribute is invalid.

4. Static

The default value of the position, typically without setting the Position property, is arranged according to the normal document flow.