CSS absolute positioning, relative positioning and document flow of those things

Objective

Touch HTML, and CSS time is not short, but every time with div+css layout when the heart is a bit empty, sometimes simply directly with table, many times with div will appear some unpredictable problems, although spending a certain amount of time to solve, but is not a thing, So today we specifically explored the relationship between absolute positioning and relative positioning and document flow in the next css+div.

The concept of document flow

Rather, it should be the mechanism of the document flow model, where the layout mechanism of the HTML is to use the document Flow model, that is, block elements (blocks) exclusive line, inline element (inline). Do not monopolize a row

such as block-level elements (blocks)

<div>div1</div><div>div2</div>

The effect is as follows

OK, so how do you know this is not because there is no high and wide style to appear, we listen to Grandpa Deng, practice is the only standard to test the truth

<div style= "width:100px; height:100px; " >div1</div><div style= "width:100px; height:100px; " >div2</div>

The effect is as follows: Well, no pit you ...

Also as inline element (inline)

<a href= "http:" > Hyperlink 1</a><a href= "http:" > Hyperlink 2</a>

The effect is as follows: you can see inline elements followed by inline elements that do not start another line

Let's try the inline and block again.

<a href= "http:" > Hyperlink 1</a><a href= "http:" > Hyperlink 2</a><div style= "width:100px; height:100px; " >div1</div>

The effect is as follows: You can see that DIV1 (block) is a separate line of exclusive

Relative positioning position:relative

Therefore, the relative positioning should be relative to a thing to locate, and this thing is what? In fact, this thing is not what, is the element itself, with left right top b0ttom after positioning, the element will be moved according to the original position, but because position:relative this attribute is not out of the document flow, so the position of the element itself will be retained.

Let's do an experiment and you'll understand.

<div style= "width:100px; height:100px; " >div1</div><div style= "width:100px; height:100px; " >div2</div><div style= "width:100px; height:100px; " >div3</div>

The effect is as follows: This is the default method of not joining the position:relative document stream

We give Div2 a position:relative and use top:-20px;left:50px to move relative.

<div style= "width:100px; height:100px; " >div1</div><div style= "width:100px; height:100px; position:relative; top:-20px; left:50px; " >div2</div><div style= "width:100px; height:100px; " >div3</div>

The effect is as follows: The amount, in order to give you see the effect also has saved PS's strength directly cut the IDE's diagram ... But I'm sure he's in the same line in the browser. We can see the blue border is the original position of the div2, the black border is position:relative relative to the original position of the left shift 50px; Move up 20px, and we see that DIV3 is not moved up because of the div2 move up, because position:relative this attribute is not out of the document flow, so the position of the element itself is preserved.

Absolute positioning Position:absolute

Well, finally a little drama meat, document flow that complex thing we first ignore, so-called absolute positioning, actually also want to find something to relative absolute, and this thing is the element of the first has position, and positon can not be static ancestor elements, is not a bit of a mouthful, change the argument, This is the location of the Kid (element) can be his father, his grandfather, his Tai gong .... (ancestral elements) and the first is a rich (position:absolute) or an official (position:relative), is not a program ape (position:static or not set position). It is also worth noting that position:absolute this attribute is out of the document flow, so repositioning the element will not occupy the original position

Let's just follow the procedure.

  <div style= "border:1px solid Red; padding:10px; width:340px; height:400px "" >    red: Tai Gong        <div style= "border:1px solid Green; padding:10px; width:320px; height:360px" " >        Green: Grandpa            <div style= "border:1px solid Yellow; padding:10px; width:300px; height:320px; ">            yellow: Dad                <div style=" width:100px; height:100px; >                    div1</div>                <div style= "width:100px; height:100px;" >                    div2</div>                <div style= "width:100px; height:100px;" >                    div3</div>            </div>        </div>    </div>

The effect is as follows: first give Div1 div2 div3 three ancestors div yellow dad, green Grandpa, Red Tai Gong, temporarily do not set position properties for them

Well, now for Dad Div set position:relative (yo!) Officials) to the div2 set position:absolute;left:120px; top:100px;

    <div style= "border:1px solid Red; padding:10px; width:340px; height:400px "" >    red: Tai Gong        <div style= "border:1px solid Green; padding:10px; width:320px; height:360px" " >        Green: Grandpa            <div style= "border:1px solid Yellow; padding:10px; width:300px; height:320px; position:relative ;" >            yellow: Dad                <div style= "width:100px; height:100px;" >                    div1</div>                <div style= "width:100px; height:100px; position:absolute; left:120px; top:100px;" >                    div2</div>                <div style= "width:100px; height:100px;" >                    div3</div>            </div>        </div>    </div>

The effect is as follows: can be seen from the Blue Line, div2 in yellow (the IDE's Blue line and yellow color mixed) div for reference distance dad 120px 100px and there are position: Absolute is out of document flow so div2 original position cannot be preserved div3 up

We'll try it again with his grandfather.

<div style= "border:1px solid Red; padding:10px; width:340px; height:400px ">    red: Tai Gong        <div style=" border:1px solid Green; padding:10px; width:320px; height:360px; position:relative; " >        Green: Grandpa            <div style= "border:1px solid Yellow; padding:10px; width:300px; height:320px; ">            yellow: Dad                <div style=" width:100px; height:100px; >                    div1</div>                <div style= "width:100px; height:100px; position:absolute; left:120px; top:100px;" >                    div2</div>                <div style= "width:100px; height:100px;" >                    div3</div>            </div>        </div>    </div>

The effect is as follows: or Div2 or position:absolute;left:120px;top:100px, can be dashed blue line to see this is green Grandpa as a reference to do absolute positioning, and Div2 also out of the document flow

As for his Tai Gong, a young man, let's leave him alone--

First come to this, in the next humble opinion, if there are errors please point out in time. Free to summarize the margin layout and float layout

Copyright? Tim Demo Download

And thanks to these three articles

http://apps.hi.baidu.com/share/detail/2284634

Http://hi.baidu.com/lileding/item/ae30c31e43c09bfe86ad4e30

Http://wenku.baidu.com/view/477959140b4e767f5acfce32.html

Tags: css absolute positioning relative positioning, CSS Position:absolute, CSS position:relative, CSS document flow

CSS absolute positioning, relative positioning and document flow of those things