CSS定位网页元素（绝对定位、相对定位、固定定位、z-index、透明度）

CSS定位网页元素

一、定位

position属性

• static ： 默认值，没有定位
• relative：相对定位
• absolute：绝对定位
• fixed：固定定位

二、相对定位

• 相对定位的特性

  • 相对于自己的初始位置来定位
  • 元素位置发生偏移后，它原来的位置会被保留下来
  • 层级提高，可以把标准文档流中的元素及浮动元素盖在下边

• 相对定位的使用场景

  相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

 
 




这是位于正常位置的标题
这个标题相对于其正常位置向左移动
这个标题相对于其正常位置向右移动
相对定位会按照元素的原始位置对该元素进行移动。
样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。
样式 "left:20px" 向元素的原始左侧位置增加 20 像素。

运行结果：

三、绝对定位

• 绝对定位的特性

  • 绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级， 则相对浏览器窗口来定位
  • 元素位置发生偏移后，原来的位置不会被保留
  • 层级提高，可以把标准文档流中的元素及浮动元素盖在下边
  • 设置绝对定位的元素脱离文档流

• 绝对定位的使用场景

  一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别 花边等场景

 
 




这是一个绝对定位了的标题
用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.

运行结果：

四、固定定位

• 固定定位的特性

  • 相对浏览器窗口来定位
  • 偏移量不会随滚动条的移动而移动

• 固定定位的使用场景

  一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶 导航栏等

 
 




Some more text
注意: IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text

运行结果：

五、z-index属性

用于调整元素定位时重叠层的上下位置

• z-index属性值：整数，默认值为0
• 设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
• z-index值大的层位于其值小的层上方

 
 




This is a heading

因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。

运行结果：

六、网页元素透明度

• opacity:x x值为0~1，值越小越透明 opacity:0.4;
• filter:alpha(opacity=x) x值为0~100，值越小越透明 filter:alpha(opacity=40);

This element's opacity is 0.5! Note that both the text and the background-color are affected by the opacity level!

运行结果：