首页 > 代码库 > CSS 中定位的使用

CSS 中定位的使用

2024-07-10 13:13:01   222人阅读

position
　　relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点 仍然会暂居原来的位置)
　　absolute 设置网页的为基准点左上角（绝对定位 以网页的左上角为基准点 不会暂居原来的位置）
　　static 无设置
left auto 以基准点定位在左边 像素/百分比 定位在左边
top auto 以基准点定位在上边 像素/百分比 定位在上边
right auto 以基准点定位在右边 像素/百分比 定位在右边
bottom auto 以基准点定位在下边 像素/百分比 定位在下边
z-index auto 自动调整高度 数字 数字越大越往上层

 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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>CSS 中定位的使用</title>
 6 <style type="text/css">
 7 div{
 8     font-size:36px;
 9     font-family:Arial, Helvetica, sans-serif;
10 }
11 .div1{
12     color:#F00;
13     position:absolute;
14     top:20px;
15     left:20px;
16     z-index:3;
17 }
18 .div2{
19     color:#0F0;
20     position:absolute;
21     top:22px;
22     left:22px;
23     z-index:2;
24 }
25 .div3{
26     color:#00F;
27     position:absolute;
28     top:24px;
29     left:24px;
30     z-index:1;
31 }
32 </style>
33 </head>
34 <body>
35 <div class="div1">名人名言，你得先是名人了那才是名言，别人的屁都是名屁！你能比吗？</div>
36 <div class="div2">名人名言，你得先是名人了那才是名言，别人的屁都是名屁！你能比吗？</div>
37 <div class="div3">名人名言，你得先是名人了那才是名言，别人的屁都是名屁！你能比吗？</div>
38   
39 </body>
40 </html>


联系
我们