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

相关文章

来自专栏HTML5学堂

关于行、块元素的讲解以及HTML5元素的分类

继上周我们讲解了所有常用的CSS选择器以及CSS选择器的优先级。到目前为止,你是不是觉得静态页面布局简单了很多,而不是单单使用类名选择器(虽然很好用)来操作了。...

3017
来自专栏一个会写诗的程序员的博客

《React极简教程》第二章 React JSXReact JSXReact.createElement独立文件JavaScript 表达式样式数组HTML 标签 vs. React 组件

JSX语法,像是在Javascript代码里直接写XML的语法,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,R...

592
来自专栏静默虚空的博客

HTML 基础

HTML 基础 本章展示最常用的 HTML 标签。 标题 标题很重要 请确保标题标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。 搜索引擎...

18910
来自专栏吾爱乐享

php学习之css选择器(二)

1195
来自专栏抠抠空间

CSS基础

一、CSS简介 css概念     CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。     当浏览器读到一个样...

2558
来自专栏刘望舒

React Native组件(三)Text组件解析

前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的例子以供学习。 1 概述 Text组...

2026
来自专栏Android小菜鸡

初识MarkDown

而在 Markdown 中,只需要在文本前面加上“#” 即可,同理、你还可以增加二级标题、三级标题、四级标题、五级标题和六级标题,总共六级,只需要增加 “#” ...

391
来自专栏大前端开发

从编程小白到全栈开发:响应用户的操作

咳嗽连续咳了一个多月,蓝瘦,我都快要忘记更新文章了...还好一个读友提醒我怎么好久没更新了,我才提起一口气,嘎吱嘎吱的重新转起我这磨损严重的脑袋来。

674
来自专栏肖洒的博客

前端入门学习--HTML

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

623
来自专栏前端侠2.0

重新认识visibility 原

原先只是记住了display:none不点位,visibility:hidden要占位显示。

302

扫描关注云+社区