position的四种取值 :
static:static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要显示指定
relative:relative 就是相对元素static定位时的位置进行偏移,如果指定static时top是50象素,那么指定relative并指定top是10象素时,元素实际top就是60象素了。
absolute:absolute绝对定位,直接指定top、left、right、bottom。有意思的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢,容器就是离元素最近的一个定位好的“祖先”,定位好的意思就是其Position是absolute或fixed或relative。如果没有这个容器,那就使用浏览器初始的,也就是body或者html元素。标准是说只需要指定left和right,width可以自动根据容器宽度计算出来,可惜ie不支持。
fixed:fixed才是真正的绝对定位,其位置永远相对浏览器位置来计算。而且就算用户滚动页面,元素位置也能相对浏览器保持不变,也就是说永远可以看到,这个做一些彩单的时候可以用。可惜的是ie还不支持
relative,absolute,fixed需要指定具体位置
relative,absolute,fixed如果不指定它的top,left等属性,那么它的position实际上依然是static。使用了relative,absolute,fixed就必须指定具体的位置。
1 <html >
2 <head>
3 <meta http-equiv="content-type" content="text/html" charset="gb2312">
4 <style> *{margin:0;padding:0} </style>
5 </head>
6 <body>
7 <div style="position:absolute;height:400px;width:400px;background:yellow;left:80px;top:80px;">
8 <div style="position:absolute;height:200px;width:200px;background:red;left:100px;top:80px;"></div>
9 <div style="position:relative;height:200px;width:200px;background:blue;left:186px;top:186px;"></div>
10 <div style="position:fixed;height:140px;width:140px;background:black;left:20px;top:20px;"></div>
11
12 <!--黑色(black)的是fixed的,所以它直接以浏览器窗口开始计算left和top的值
13 红色(red)和蓝色(blue)分别是absolute和relative他们都是从父对象开始计算left和top的值,
14 只是因为有一个是absolute所以产生了重叠效果,没有被另外一个挤走。
15
16 -->
17 </div>
18 <div style="position:static;height:140px;width:140px;background:brown;left:220px;top:220px;"></div>
19 <!--紫色(brown)的是static的,所以它的left和top没有起作用,一直跑到最上面去了
20 同时我也明白了另外一个道理,因为默认的类型都是static,所以当我们的页面长度等定位的不合理时一个会把一个挤走。
21 -->
22
23 </body>
24 </html>
有时候我们需要针对某一个容器的悬浮效果,而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦,而且几乎无法完美实现效果。我一开始也无能为力,后来发现只要把其上一级的样式属性 position设置为relative就可以了。
也就是说,position的属性值的效果,直接受其容器样式中position属性值影响。
例如如下A-B的嵌套结构
<div id="A">
<div id="B">
</div>
</div>
有时候我们需要针对某一个容器的悬浮效果,这时候通过高度、宽度的计算不但麻烦,而且几乎无法完美实现效果。只要把其上一级的样式属性 position设置为relative就可以了。
也就是说,position的属性值的效果,直接受其容器样式中position属性值影响。
例如如下A-B的嵌套结构
25 <div id="A">
26 <div id="B">
27 </div>
28 </div>
当A的position为relative时,B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档,而是针对id为A的这个div了。
<img> 都有width属性,如img.width 值没有px 但style.width 是有px的,必须用parseInt去除,不然会报错,当<img>定义了固定宽度时,可用var image = new Image();
image.src = img.src;得到原图像的原大小
29 <html >
30 <head>
31 <meta http-equiv="content-type" content="text/html" charset="gb2312">
32 <style> *{margin:0;padding:0} </style>
33 </head>
34 <body>
35
36 <div id="Canvas" style="background-color:#cccccc;height:266px;width:284px">
37 <table id="Crop" cellpadding="0" cellspacing="0" border="0" style="border: 1px solid green">
38 <tr>
39 <td style="height: 107px" colspan="3" class="Overlay"></td>
40 </tr>
41 <tr>
42 <td style="width: 105px" class="Overlay"></td>
43 <td style="width: 90px; height: 60px; border-width: 1px; border-style: solid; border-color: white;"></td>
44 <td style="width: 105px" class="Overlay"></td>
45 </tr>
46 <tr>
47 <td style="height: 107px" colspan="3" class="Overlay"></td>
48 </tr>
49 </table>
50
51
52 <div style="position: relative;background-color:green; left:0; top: 0; border: 1px solid red" id="IconContainer">
53 <img id="icon" src="1.gif" style="border-width: 0px; position: relative; left: 0px; top: 0px">
54 </div>
55 <div style="position: relative;background-color:red; left:16; top:16">fdsadsa</div>
56 </div>
57
58 <script type="text/javascript">
59 <!--
60 var canva = document.getElementByIdx_x("Canvas");
61 var obj = document.getElementByIdx_x("icon");
62 var image = new Image();
63 image.src = obj.src;
64 alert(canva.style.width) //284
65 alert(image.width) //28
66 alert(obj.width); //28
67 alert(obj.style.width); //
68 obj.style.left = (parseInt(canva.style.width) - image.width )/2 + "px";
69 obj.style.top = -(parseInt(canva.style.height) + image.height)/2 + "px";
70 //-->
71 <!--
72 图片居中,这类问题一般都是算两者的width和height,再求left和top,都要求(最好放一起),position设为relative ,相对自己在父元素的原始位置的位移,向右下角移动为正
73 -->
74 </script>
75
76 </body>
77 </html>