关于定位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 条评论
登录 后参与评论

相关文章

来自专栏黑泽君的专栏

day01_html学习笔记

24310
来自专栏向治洪

Android View底层到底是怎么绘制的

Android绘制链图: ? 网上很多讲Android  view的绘制流程往往只讲到了Measure - Layout - Draw。 但是,这只是一个...

27190
来自专栏十月梦想

css选择器

            选择器{... !important} 则该选择器的优先级最高

9050
来自专栏黑泽君的专栏

day02_css学习笔记

9420
来自专栏HTML5学堂

2016.04第4周 群问题分享

HTML+CSS img图片下面产生3px间隙问题 2016.4.25~2016.4.29 核心概念 行元素垂直方向的对齐方式和行块元素转换 参考答案 方法一:...

372140
来自专栏一个爱吃西瓜的程序员

Web前端基础【2】--CSS基础

CSS指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题:即使同一个HTML文档也能表现出外观...

36260
来自专栏超然的博客

自定义按钮~自适应布局~常见bug

24720
来自专栏前端知识分享

第141天:前端开发中浏览器兼容性问题总结(二)

在浏览器中想要垂直居中,设置vertical-align:middle; 不起作用。例如:ie6下文本与文本输入框对不齐,需设置vertical-align:m...

25720
来自专栏肖洒的博客

前端入门学习--HTML

写在前面。 前端知识真的还是比较有用的。一直要把前端的学习提上日程,因为各种事情各种拖延,写爬虫的时候也是捎带学习前端的东西,还是需要系统的了解下。 All ...

31930
来自专栏一“技”之长

Bootstrap响应式前端框架笔记八——按钮组

    在Bootstrap定义的Css样式中,开发者可以将一组btn控件包裹在btn-group类中使其组合成按钮组控件,组合后的控件左右两侧的按钮将被圆角处...

11620

扫码关注云+社区

领取腾讯云代金券