层模型的三种形式

阅读数:695 发布时间:2016-06-26 15:59:08

作者:zzl005 标签: CSS 布局模型 层模型

层模型有三种形式:

  1. 绝对定位(position: absolute)
  2. 相对定位(position: relative)
  3. 固定定位(position: fixed)

一、绝对定位(position: absolute):

position:absolute(表示绝对定位)
作用:将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。

div{  
  width:200px;  
  height:200px;  
  border:2px red solid;  
  position:absolute;  
  left:100px;  
  top:50px;  
}

二、相对定位(position: relative):

div1{  
    width:200px;  
    height:200px;  
    border:2px red solid;  
    position:relative;  
    left:100px;  
    top:50px;  
}
/#相对于以前位置向右移动100px,向下移动50px#/

absolute表里如一,移动了就是移动了。relative只是表面显示移动了,但实际还在文档流中原有位置,别的元素无法占据原来的位置。


三、固定定位(position:fixed):

与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。

应用:positive:fixed


Relative 和 Absolute 组合使用

相对于其它元素进行定位?

使用position:relative
前提:

  1. 参照定位的元素必须是相对定位元素的前辈元素
  2. 参照定位的元素必须加入position:relative
  3. 定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了

总结:
要在父辈元素中加relative,因为你要相对该父辈进行定位 而在自辈元素中加absolute,再进行设置长宽高!

相关文章推荐: