web进阶之十三：相对定位和绝对定位、层级和设置背景透明度

开启定位会使我们的元素移动，这样可以控制Web浏览器如何以及在何处显示特定的元素。
如何使用呢？

可以使用position属性把一个元素放置到网 页中的任何位置。

• 可选值：
  static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
  relative 生成相对定位的元素，相对于其正常位置进行定位。
  absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
  fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。

相对定位

相对定位也就是相对当前的位置进行移动了。开启相对定位不会使元素脱离文档流。

• top、right、bottom、left四个属性对元素进行定位
  首先得开启，position relative，然后再进行设置。

    
    
    





我是一个span元素

相对定位的特点

• 如果不设置元素的偏移量，元素位置不会发生改变
• 也不会改变其属性。
• 相对定位不会使元素脱离文本流。元素在文本流中的位置不会改变。
• 相对定位不会改变元素原来的特性。
• 相对定位会使元素的层级提升，使元素可以覆盖文 本流中的元素。

绝对定位

开启绝对定位时，它的将会相对于html元素（页面的顶端，但是不涉及默认设置）或离他最近的祖先定位元素进行定位。

当将position属性设置为absolute时，则开启 了元素的绝对定位。

• 当开启了绝对定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位。

绝对定位的特点

• 绝对定位会使元素完全脱离文本流。
• 绝对定位的块元素的宽度会被其内容撑开。
• 绝对定位会使行内元素变成块元素，改变其性质
• 一般使用绝对定位时会同时为其父元素指定一 个相对定位，以确保元素可以相对于父元素进行定位。即让开启绝对定位的元素，还是以其父元素为基准，否则会基于浏览器左上角定位(而且不基于浏览器的默认设置)

固定定位

固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动。

就像网页中那些广告或者二维码一样，屏幕虽然滚动但是它们不会移动

开启固定定位：将position属性设置为fixed时，则开启了元素的 固定定位。

• 当开启了固定定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。

    
    
    




    



我是span元素

开启固定定位后的一些特性和开启绝对定位有些相似。但是ie浏览器不支持这样的开启。

层级 z-index和背景透明度

我们在说到css之处时，讲到CSS是指层叠样式表 (Cascading Style Sheets)。所谓的层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖乘次低的，而css就可以分别为网页的各个层次设置样式。
那么当我们开启定位之后就可以设置层级了，如果没有开启定位，层级是无法开启的。

---

有任何问题请给我留言，或者直接发我邮箱[email protected]。欢迎大家交流讨论。