css基础回顾-定位:position

w3school 对position定义和说明是:

定义和用法:
position 属性规定元素的定位类型。 说明:
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

position有以下属性值:

可能的值
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative
生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 inherit 规定应该从父元素继承 position 属性的值。
1、absolute具有以下特点:
1、使元素完全脱离文档流;
2、使内嵌支持宽高;
3、块属性标签将由内容撑开宽度;
4、如果有定位父级相对于定位父级发生偏移,没有定位父级相对于整个文档(document)发生偏移;
5、相对定位一般都是配合绝对定位元素使用;

具体应用如多级菜单,一级菜单的li设置相对定位,二级菜单的ul设置绝对定位。

如下:

 

  • 一级菜单1
    • 二级菜单1-1
    • 二级菜单1-2
    • 二级菜单1-3
    • 二级菜单1-4
  • 一级菜单2
    • 二级菜单2-1
    • 二级菜单2-2
    • 二级菜单2-3
    • 二级菜单2-4
  • 一级菜单3
    • 二级菜单3-1
    • 二级菜单3-2
    • 二级菜单3-3
    • 二级菜单3-4

说明:一级菜单的每个li设置了相对定位,二级栏目的ul设置绝对定位,寻找最近的定位父级,为父级Li,所以相对于父级Li定位。

2、relative:具有以下特点:
1、不影响元素本身的特性;
2、不使元素脱离文档流;
3、如果没有定位偏移量,对元素本身没有任何

具体应用实例:

  • 一级菜单1
  • 一级菜单2
  • 一级菜单3

给每个Li设置了相对定位position:relative;设置hover时top的值为-2px,可以看到hover的li像对于自身像上移动2px,而不会对页面其他内容产生影响。

3、fixed的特点于absolute基本相似,不同的是fixed是相对于整个文档定位,即定位父级是document,另外IE6不认识fixed属性值,应用可以做一个始终居于页面右下角的回到顶部按钮(但这个一般都是JS制作的)

先总结这么多吧。。。。。当自己复习用

上一篇:sql 将表B中不存在表A的数据 插入到表A中


下一篇:使用CSS选择器定位页面元素