Several CSS to control page layout positioning mechanism
For web beginners, CSS positioning in several ways often confusing, and thus can not reach the desired page layout effects, while there is a good time to sum up the CSS positioning in several ways, but also when consolidating his own.
CSS page layout contains three control positioning mechanism: the general flow, relative positioning, absolute positioning. It shows the positioning mechanism by the position property in CSS. In addition you can also use the float property to allow floating elements
Normal flow
Corresponding syntax (default)
position:static;
So-called normal stream is carried out according to the layout of block-level elements and inline attribute element itself, without human control. Each block elements are shown with a line, each item displayed on the front of the next line item. Even if you develop a width of the box, and also wide enough so that two elements side by side, they will not appear on the same line. This is the default browser handles HTML elements, do not use CSS attribute indicates that the element should appear in the general flow inside
All of the following examples use this HTML5 code
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Happy kitchen</title> 6 <link href="test.css" rel="stylesheet" type="text/css"> 7 </head> 8 <body> 9 <div id="div1">Div1</div> 10 <div id="div2">Div2</div> 11 <div id="div3">Div3</div> 12 13 </body> 14 </html>
CSS code
1 body 2 { 3 width: 750px; 4 color: black; 5 } 6 div 7 { 8 border: solid; 9 width: 400px; 10 height: 200px; 11 text-align: center; 12 } 13 #div1 14 { 15 background-color: red; 16 } 17 #div2 18 { 19 background-color: green; 20 21 } 22 #div3 23 { 24 background-color: blue; 25 }
Renderings:
Relative positioning
Corresponding syntax
position:relative
A relative positioning of the element from its normal position in which the flow movement, and this movement does not affect the position of surrounding elements, or in their normal position in which the flow.
CSS code:
1 body 2 { 3 width: 750px; 4 color: black; 5 } 6 div 7 { 8 border: solid; 9 width: 400px; 10 height: 200px; 11 text-align: center; 12 } 13 #div1 14 { 15 background-color: red; 16 } 17 #div2 18 { 19 background-color: green; 20 position: relative; 21 top:100px; 22 left:100px; 23 } 24 #div3 25 { 26 background-color: blue; 27 }
效果图：
理解：最重要的一点，相对是相对于其在普通流中的位置来说的，就是使用浏览器默认布局效果来说的。此时的Div2在其原来的位置上分别向下、向右移动了100px。并且另外一点，它不会影响Div3的位置，Div3还是在原来的位置上。
绝对定位
相应语法
position:absolute;
绝对定位的元素相对于它的包含元素，包含元素可能是文档中的另一个元素或者是初始包含元素，说白了，就是沿着其父层找已经定位的元素。它完全脱离了普通流，也就是说不会影响到周围任何元素的位置（就像是直接忽略掉它所占据的空间）。
1 body 2 { 3 width: 750px; 4 color: black; 5 } 6 div 7 { 8 border: solid; 9 width: 400px; 10 height: 200px; 11 text-align: center; 12 } 13 #div1 14 { 15 background-color: red; 16 } 17 #div2 18 { 19 background-color: green; 20 position: absolute; 21 top:100px; 22 left:100px; 23 } 24 #div3 25 { 26 background-color: blue; 27 }
效果图：
理解：Div2的父层元素body没有使用定位，而body没有再往上的父层元素了，因此Div2实际上是相对于屏幕左上角分别向下、向右移动了100px。而Div2使用了绝对定位之后，从普通流中脱离，不再在流中占据空间，此时的Div3的上一个元素变成了Div1，因此Div3就按照普通流的顺序排在了Div1的后面。
假如我们给body元素也是定位，使用如下的CSS代码，效果就又不一样了
1 body 2 { 3 width: 750px; 4 color: black; 5 position: relative; 6 top:100px; 7 } 8 div 9 { 10 border: solid; 11 width: 400px; 12 height: 200px; 13 text-align: center; 14 } 15 #div1 16 { 17 background-color: red; 18 } 19 #div2 20 { 21 background-color: green; 22 position: absolute; 23 top:100px; 24 left:100px; 25 } 26 #div3 27 { 28 background-color: blue; 29 }
理解：此时body不在屏幕的左上角了，相对于屏幕左上角分别向下、向右移动了100px，前一份代码body是位于屏幕左上角的。此时Div2的父层元素body使用了定位，因此Div2相对于body的起始位置分别向下、向右移动了100px，达到了现在的效果
对于绝对定位来说，使用了绝对定位的元素的位置相对于最近的已定位的祖先元素，如果没有已定位的祖先元素，那么它的位置相对于最初的包含块