CSS几种定位随笔
Position:absoluate将元素脱离正常的文档流而分布在不可见的Z轴;每个元素都可以用4个偏移关键字top,right,bottom,left控制;
相对定位:
类似于静态定位;但是不脱离文档流程,相比于静态定位;有如下3点不同;
1 它可以作为包含在它内部的绝对定位的元素的参考点
2 相对定位元素可以通过使用偏移量属性来调整位置
3 相对定位元素可以在(不可见的)z轴上具有相应的位置
相对定位元素仅接受4中偏移量属性的组合:
top和left,top和right,bottom和right,bottom和left;其他组合将直接被忽略掉;
固定定位:
将元素保持在同一个固定的位置;即使文档滚动也是如此，但IE6不支持固定定位;如果要在IE6中实现固定定位的效果;可以采用expression表达式的方式来实现;
与相对定位的区别:
固定定位是相对于视口进行位置坐标设置的;
绝对定位是相对于Relative作为参照点进行坐标设置的;
因此固定定位的时候;元素会随着滚动条的位置变化而变化;而绝对定位不会
在IE6中要实现与Firefox中的Position:Fixed一样的效果的话;则需要采用expression+js动态地计算元素的位置;如下
FireFox:
div{
position:fixed;
top:0px;
left:0px;}
IE6.0
div{
position:absolute;
left:expression(eval(documentElement.scrollLeft));
top:expression(eval(documentElement.scrollTop));
}
而对于bottom的计算方式则为:Top:滚动条高度+视口高度-固定元素的高度如:
expression(eval(documentElement.scrollTop+documentElement.clientHeight-this.clientHeight))
透明度:
Opacity:
Firefox1.5及以上版本,Safari,Opera9;取值范围:0~1;0:表示完全透明,1表示完全不透明,
-moz-opacity:
Firefox1.5以下版本,Netscape及Mozilla SeaMonkey的浏览器套件;取值范围:0~1
Filter:专属于Microsoft的IE5.5及以上版本;通过设置其中的opacity的指来设置透明度;如下：
Filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);取值范围:0~100
相关:
块级元素(如:h,div,p等)默认采用”扩展适应”的宽度(但是垂直方向上则采用”收缩适应”的方式);而如果设置了float或绝对定位和固定定位之后;将采用收缩适应的方式
如何让绝对/固定定位元素应用扩展适应的功能?
利用left和rigtht来生暗示模拟水平的扩展适应及top和bottom来暗示模拟垂直的扩展适应;如下:
div{
position:fixed;
left:9;
right:9;
top:0;
bottom:0;
}
这边不采用width=”100%”和height=”100%”的原因:对任何采用绝对定位和其他方式定位的块级元素应用内边距,边框和外边距,然后再设置宽高度设置100%,最后都得不到预期的结果;
但是IE6中不支持通过偏移量来实现自动扩展的功能;(IE6中可以采用Expression来自动计算with和Height的值进行)
Z轴和z-index属性
z-index属性用于沿着不可见的z轴控制定位元素的层次;我们可以将它想象成垂直于计算机屏幕的一条不可见的轴线;我们可以利用它用于控制那些应用了相对定位,绝对定位和固定定位的元素的z轴上的位置;
默认情况下;本元素的z-index的值会比上个元素的z-index大;但是如果上个元素有设置z-index的话;则本元素还是从0开始赋值;如下:
<div id="divTest" style=" left:100px; top:100px;">
<div id="divChild1" style=" left:10px; top:10px; background-color:Red;"></div>
<div id="divChild2" style=" left:20px; top:20px; background-color:Green;"></div>
<div id="divChild3" style=" left:30px; top:30px; background-color:Maroon;"></div>
</div>
<div id="divTest2" style=" left:140px; top:140px; background-color:Black;"></div>
<div id="divTest3" style=" left:150px; top:150px; background-color:Blue;"></div>
CSS1:z-index=auto;
div{
width:100px;height:100px;
position:absolute;background-color:Silver;
}
结果如下:
CSS2:加上如下css之后;
div{
width:100px;height:100px;
position:absolute;background-color:Silver;
z-index:1;
}
给divTest赋值z-index之后;divTest及其内部的Div都浮在divTest2,divTest3,divTest4的上面;如果说z-index是从0开始的话;divTest4应该就浮在divtest的上方了才对呀;并且发现无论divTest3之前加多少个div;divTest4最后还是浮在divTest的下方.
而如果将divTest的z-index设置为0的话;则divTest4会浮在divTest的上方;
对于嵌套元素的z-index属性;它直接忽略掉整数值;如;基于上的基础上添加如下:CSS
#divChild1{
z-index:10;}
最终的结果都是;外层元素在底部;而内部元素浮在它上方.它体现了元素后台z-index值自然高于元素本身z-index值的规则；
对于同级别的元素;如果z-index的值一样的话;则往下的元素就浮动在上元素的上方.给divTest赋值z-index之后;divTest及其内部的Div都浮在divTest2,divTest3,divTest4的上面;如果说z-index是从0开始的话;divTest4应该就浮在divtest的上方了才对呀;并且发现无论divTest3之前加多少个div;divTest4最后还是浮在divTest的下方.
而如果将divTest的z-index设置为0的话;则divTest4会浮在divTest的上方;
