前言  

  定位的目的就是把元素摆放到指定的位置。

定位上下文:定位元素的大小,位置都是相对于定位上下文的。

position属性值有5个值

  static:所有有元素定位默认的初始值都是static。就是不定位。

  relative(相对定位):相对自身之前的位置进行定位,之前占有的空间任然保留。

  absolute(绝对定位):在文档树中从下到上找最近的,position拥有static之外值的先祖元素作为定位上下文,其宽高百分比相对的都是定位上下文。一直找到根元素为止,都没有就把根元素作为上下文。

  fixed(绝对定位):相对于浏览器视窗定位。

  注意:当元素的position拥有absolute和fixed就会生块级框,拥有设置宽高的的能力。无论它之前是什么类型的元素。

定位方向

  position属性拥有static之外的值时,就叫做拥有定位。可以使用top/bottom/left/right四个值相对定位上下文指定位置。

  小技巧:让定位元素在定位上下文中水平,垂直居中。

#hero{
position:absolute;
top:;
left:;
right:;
bottom:;
margin:auto;
}

positions与流(z-index)

  流:以页面正常流为0点的z轴,横截面看来就像一本书。背景z值是-1。

  z-index:用来调整元素的层级,拥有absolute和fixed的元素才能够使用这个使用。

  position的默认操作:absolute、fixed属性会把元素从正常流中脱离出来。位于正常流上方。把z值修改为1。

小结:

  1,position属性有5个值:static/relative/absolute/fixed 。

  2,拥有absolute或fixed的元素能够使用z-index调整层级。

  3,让元素脱离文档正常流的定位属性会改变元素的显示,在元素周围生成块级框。

最新文章

  1. TODO:MongoDB的查询更新删除总结
  2. APICloud开发App总结(一)
  3. ASP.NET Misconfiguration: Excessive Session Timeout
  4. Firefox 23中的新特性(新陷阱)
  5. 文件系统管理 之 Linux 创建文件系统及挂载文件系统流程详解
  6. windows中用eclipse开发Android环境搭建SDK安装异常
  7. PHP 函数extension_loaded();
  8. MATLAB绘图与图形处理
  9. Activity启动模式图文详解
  10. Eclipse+Java+OpenCV246人脸识别
  11. 《python源代码分析》笔记 pythonVM一般表达式
  12. sql备份(导出脚本)
  13. PHP协程入门详解
  14. 洛谷P2480 [SDOI2010]古代猪文(费马小定理,卢卡斯定理,中国剩余定理,线性筛)
  15. servlet 获取 post body 体用流读取为空的问题【转】
  16. redhat5 设置静态ip
  17. vmware使用vsphere的镜像
  18. 根据23423条件,截取字段‘abdecsdsadsadsad’,以ab/dec/sdsa/ds/ads 输出
  19. 异常之交叉编译---arm-vfp-linux-gnu/bin/ld: cgic.o: Relocations in generic ELF (EM: 3)
  20. Java并发工具类之并发数控制神器Semaphore

热门文章

  1. ESXi 5.5 RTL9168E网卡驱动 找到网卡
  2. Android笔记之平移View
  3. Linux就该这么学--命令集合8(命令行通配符)
  4. github for unity
  5. Struts页面跳转问题
  6. 使用adb命令查看android中的数据库
  7. poj3461 Oulipo —— KMP
  8. centos 配置
  9. GDP与股市市值
  10. 通过kettle数据导入mysql时,空值的处理在插入mysql时,会自动转转换为null值,无法插入