HTML中的定位

最新推荐文章于 2024-08-23 14:03:47 发布

chengwu5823

最新推荐文章于 2024-08-23 14:03:47 发布

阅读量97

点赞数

文章标签： xhtml

原文链接：https://my.oschina.net/u/199196/blog/36295

版权

HTML中的定位

HTML的定位

HTML中要显示有层次时用定位;定位有绝对定位,相对定位和固定定位。

1.绝对定位:在选择器中用position:absolute;此时它有类似与浮动的效果，相当于脱离了文档流，如:

此时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">

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>

当在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>

此时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>

转载于:https://my.oschina.net/u/199196/blog/36295

chengwu5823

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML中的定位

HTML中的定位 HTML的定位 HTML中要显示有层次时用定位;定位有绝对定位,相对定位和固定定位。 1.绝对定位:在选择器中用position:absolute;此时它有类似与浮动的效果，相当于脱离了文档流，如: ...
复制链接

扫一扫