关于定位position的相关知识

HTML5学堂 - 刘国利:最近有好几个学生和自己聊起,总觉得定位有点懵。因此在本文中,主要书写了相对定位relative和绝对定位absolute,定位的用法以及叠层后的层级关系计算方法。

position的属性值

position属性规定了元素的定位类型,所有的元素都可以用position来进行定位。position定位之后的对象将具有块属性。position属性有五个取值,分别为:static、relative、absolute、fixed、inherit,其中“static”为默认值,可以省略不写,static元素会忽略任何top、bottom、left或right声明。

再次强调,所有的元素都可以进行定位处理~!

何时使用position

HTML+CSS布局方式之中,最为常见的有两种布局模式,分别是浮动布局和定位布局。在我们平时,使用最多的就是浮动布局,当在页面当中出现多个元素层叠状态时,我们则会考虑定位布局。例如平时的弹窗、黑色蒙版层、返回顶部、微博等网站顶部的导航条~~~

相对定位和绝对定位是否会让元素脱离文档

当对一个元素设置了position:absolute和position:fixed时,会让该元素脱离文档流,从而对父级以及兄弟级元素的布局造成影响。如果元素设置了position:relative,根据W3C官方文档上来说,并不会脱离文档流,也不会有布局上的问题,但是在实际开发中的情况则是:元素不会脱离文档流,但是是可以设置top、left等值进行操作,而且设置也是生效的。

范例代码

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂 - H5course - 相对定位不会脱离文档流</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
  .wrap div {
      width: 200px;
      height: 200px;
      border: 5px solid #f00;
      background: #39f;
  }
  .wrap .box {
      position: relative;
      left: 10px;
      top: 50px;
      background: #3f9;
  }
</style>
</head>
<body>
<div class="wrap">
  <div class="box">设置了relative的div元素</div>
  <div>HTML5学堂 - http://www.h5course.com</div>
</div>
</body>
</html>

显示效果:

设置绝对定位的元素,会脱离文档流,如下例子

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂 - H5course - 绝对定位会脱离文档流</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
  .wrap div {
      width: 200px;
      height: 200px;
      border: 5px solid #f00;
      background: #39f;
  }
  .wrap .box {
      position: absolute;
      left: 10px;
      top: 50px;
      background: #3f9;
  }
</style>
</head>
<body>
<div class="wrap">
  <div class="box">设置了absolute的div元素</div>
  <div>HTML5学堂 - http://www.h5course.com</div>
</div>
</body>
</html>

显示效果:

元素设置position:absolute时,针对哪个元素定位

设置属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠。此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border )。

要激活对象的绝对(absolute)定位,必须指定left,right,top,bottom 属性中的至少一个,并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ,这将导致对象遵从正常的HTML布局规则,在前一个对象之后立即被呈递。

如果父级(无限)没有设定position属性,那么当前的absolute则结合top,right,left,bottom属性以浏览器左上角为原始点进行定位

如果父级(无限)设定position属性,且属性值为relative、absolute、fixed,那么当前的absolute则结合top,right,left,bottom属性以父级(最近)的左上角为原始点进行定位。

fixed的定位方式

fixed可定位相对于浏览器窗口的指定坐标.这个元素的位置可通过left、right、top、bottom属性来规定。不论窗口滚动与否,元素都会留在那个位置。但这个标签的兼容性不好,可以用absolute来取代,实现同样的效果。

在IE6.0及以下版本的浏览器里是不支持position:fixed。而在IE7,IE8,firefox,opera,chrome都可以完美的支持此特性

z-index

z-index设置元素的堆叠顺序,值可以为负。拥有最高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面。z-index只能针对同级的标签有效,也就是说子标签的z-index值对于父标签是无效的,因为两者的级别不同z-index是无法比较的。因此,针对两个设置绝对定位的元素,进行层级比较时,首先应当比较其父级,再比较子级,换句话说——“拼爹”。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户画像

jQuery登录验证

572
来自专栏一“技”之长

AppleWatch开发入门三——代码交互与控制器生命周期

        在前两篇博客中,讨论了关于watch开发中框架与界面布局相关,然而主要的逻辑,终究还是要通过代码来实现的,在我们创建了项目之后,就会生成Inte...

483
来自专栏杨逸轩 ' sBlog

手机QQ链接跳转到浏览器打开

1966
来自专栏一枝花算不算浪漫

Matcher类的简单使用

2697
来自专栏程序员互动联盟

【专业技术】CSS作用及用法

层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的...

3427
来自专栏吾爱乐享

php学习之css入门(一)

1252
来自专栏较真的前端

那些暖人心却鲜为人知的CSS属性

1776
来自专栏蓝天

细节决定品质:不良的if/else使用习惯

这个时候应当考虑提取成函数调用,以减少直接的if/else嵌套层次。同理,while/for也应当避免这种情况。

721
来自专栏Java后端技术

让div等块级元素水平以及垂直居中的解决办法

  我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让d...

722
来自专栏每日一篇技术文章

weex-20-scroller组件

scroll-direction 值为horizontal 水平滚动,值为vertical 垂直滚动

622

扫码关注云+社区