HTML的定位
HTML中要显示有层次时用定位;定位有绝对定位,相对定位和固定定位。
1.绝对定位:在选择器中用position:absolute;此时它有类似与浮动的效果,相当于脱离了文档流,如:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml"
3 <head>
4 <title></title>
5 <style type="text/css">
6 body{
7 margin:0px;;
8 }
9 .div1{
10 width:100px;
11 height:100px;
12 background-color:#669900;
13 position:absolute;
14 }
15 .div2{
16 width:200px;
17 height:50px;
18 background-color:#aa00ff;
19 }
20 </style>
21 </head>
22 <body>
23 <div class="div1">div1</div>
24 <div class="div2">div2</div>
25 </body>
26 </html>
2 <html xmlns="http://www.w3.org/1999/xhtml"
3 <head>
4 <title></title>
5 <style type="text/css">
6 body{
7 margin:0px;;
8 }
9 .div1{
10 width:100px;
11 height:100px;
12 background-color:#669900;
13 position:absolute;
14 }
15 .div2{
16 width:200px;
17 height:50px;
18 background-color:#aa00ff;
19 }
20 </style>
21 </head>
22 <body>
23 <div class="div1">div1</div>
24 <div class="div2">div2</div>
25 </body>
26 </html>
![](https://i-blog.csdnimg.cn/blog_migrate/5f0b44c6484e55cc36aa00708f9f2275.png)
此时div1像浮动了,div2补上div1的位置(即有浮动的效果,div2被div1遮住了)
此时如果定义它的高和距离左右,定义的是该块距离它的上一级(即它的父)的距离
如
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml"
3 <head>
4 <title></title>
5 <style type="text/css">
6 body{
7 margin:0px;;
8 }
9 .div1{
10 width:100px;
11 height:100px;
12 background-color:#669900;
13 position:absolute;
14 top:10px;
15 right:10px;
16 }
17 .div2{
18 width:200px;
19 height:50px;
20 background-color:#aa00ff;
21 }
22 </style>
23 </head>
24 <body>
25 <div class="div1">div1</div>
26 <div class="div2">div2</div>
27 </body>
28 </html>
2.相对定位:position:relative;相对定位也有浮动的效果,只是它相对于原来的位置发生了偏移。例如: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <head>
4 <title></title>
5 <style type="text/css">
6 body{
7 margin:0px;;
8 }
9 .div1{
10 width:100px;
11 height:100px;
12 background-color:#669900;
13 position:absolute;
14 top:10px;
15 right:10px;
16 }
17 .div2{
18 width:200px;
19 height:50px;
20 background-color:#aa00ff;
21 }
22 </style>
23 </head>
24 <body>
25 <div class="div1">div1</div>
26 <div class="div2">div2</div>
27 </body>
28 </html>
![](https://i-blog.csdnimg.cn/blog_migrate/adb2d69a3b153f56228336a375b8b7db.png)
2.相对定位:position:relative;相对定位也有浮动的效果,只是它相对于原来的位置发生了偏移。例如: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml"
3 <head>
4 <title></title>
5 <style type="text/css">
6 body{
7 margin:0px;;
8 }
9 .div1{
10 width:100px;
11 height:100px;
12 background-color:#669900;
13 position:relative;
14 top:10px;
15 left:10px;
16 }
17 .div2{
18 width:200px;
19 height:50px;
20 background-color:#aa00ff;
21 }
22 </style>
23 </head>
24 <body>
25 <div class="div1">div1</div>
26 <div class="div2">div2</div>
27 </body>
28 </html>
3 <head>
4 <title></title>
5 <style type="text/css">
6 body{
7 margin:0px;;
8 }
9 .div1{
10 width:100px;
11 height:100px;
12 background-color:#669900;
13 position:relative;
14 top:10px;
15 left:10px;
16 }
17 .div2{
18 width:200px;
19 height:50px;
20 background-color:#aa00ff;
21 }
22 </style>
23 </head>
24 <body>
25 <div class="div1">div1</div>
26 <div class="div2">div2</div>
27 </body>
28 </html>
![](https://i-blog.csdnimg.cn/blog_migrate/194b9fec9599e5ddc73c26d0609ceb98.png)
当在body中为绝对定位时,其父为相对定位如:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <style type="text/css">
6 body{
7 margin:0px;
8 }
9 div{
10 width:200px;
11 height:200px;
12 }
13 .div1 {
14 background-color:#ccc;
15 position:absolute;
16 bottom:0px;
17 right:0px;
18 z-index:999;
19 }
20 .div2 {
21 margin-left:60px;
22 width:500px;
23 height:300px;
24 background-color:#ff6600;
25 position:relative;
26 }
27
28 </style>
29 </head>
30 <body>
31 <div class="div2">DIV2
32 <div class="div1">DIV1</div>
33 </div>
34 </body>
35 </html>
3 <head>
4 <title></title>
5 <style type="text/css">
6 body{
7 margin:0px;
8 }
9 div{
10 width:200px;
11 height:200px;
12 }
13 .div1 {
14 background-color:#ccc;
15 position:absolute;
16 bottom:0px;
17 right:0px;
18 z-index:999;
19 }
20 .div2 {
21 margin-left:60px;
22 width:500px;
23 height:300px;
24 background-color:#ff6600;
25 position:relative;
26 }
27
28 </style>
29 </head>
30 <body>
31 <div class="div2">DIV2
32 <div class="div1">DIV1</div>
33 </div>
34 </body>
35 </html>
![](https://i-blog.csdnimg.cn/blog_migrate/eaa342874416fc1b21d0a0a0bc011ecb.png)
此时div1的位置是相对于div2的位置来说的。
3.固定定位:固定定位个人认为可以理解为固定于浏览器边框,不随滚动条的滚动而滚动:如:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml"
3 <head>
4 <title></title>
5 <style type="text/css">
6 body{
7 margin:0px;;
8 }
9 .toolbar{
10 height:30px;
11 width:100%;
12 background-color:green;
13 position:fixed;
14 top:0px;
15 left:0px;
16 }
17 .div{
18 width:150px;
19 height:150px;
20 background-color:#ff0000;
21 }
22 </style>
23 </head>
24 <body>
25 <div class="toolbar"></div><br/>
26 <div class="div">div1</div><br/>
27 <div class="div">div2</div><br/>
28 <div class="div">div3</div><br/>
29 <div class="div">div4</div><br/>
30 <div class="div">div5</div><br/>
31 <div class="div">div6</div><br/>
32 <div class="div">div7</div><br/>
33 <div class="div">div8</div> <br/>
34 <div class="div">div9</div><br/>
35 <div class="div">div0</div><br/>
36 </body>
37 </html>
2 <html xmlns="http://www.w3.org/1999/xhtml"
3 <head>
4 <title></title>
5 <style type="text/css">
6 body{
7 margin:0px;;
8 }
9 .toolbar{
10 height:30px;
11 width:100%;
12 background-color:green;
13 position:fixed;
14 top:0px;
15 left:0px;
16 }
17 .div{
18 width:150px;
19 height:150px;
20 background-color:#ff0000;
21 }
22 </style>
23 </head>
24 <body>
25 <div class="toolbar"></div><br/>
26 <div class="div">div1</div><br/>
27 <div class="div">div2</div><br/>
28 <div class="div">div3</div><br/>
29 <div class="div">div4</div><br/>
30 <div class="div">div5</div><br/>
31 <div class="div">div6</div><br/>
32 <div class="div">div7</div><br/>
33 <div class="div">div8</div> <br/>
34 <div class="div">div9</div><br/>
35 <div class="div">div0</div><br/>
36 </body>
37 </html>
![](https://i-blog.csdnimg.cn/blog_migrate/23b6ae10d95f2ffb7a1e9ff51f178ba6.png)