Go语言视频零基础入门到精通

kniwew

绝对定位:
   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:progidXImageTransform.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的上方;

zj905

不错学习了啊。