定位

元信息

目标：掌握四种基本定位机制（静态/相对/绝对/固定）各自的坐标原点、是否脱离文档流与重叠规则，会用来实现浮层、固定导航等效果
关键概念：静态定位、相对定位、绝对定位、固定定位、文档流、z-index
关联阶段：cp2
常见误区：以为相对定位后原位置会被兄弟元素占据（原空间仍保留，只是显示偏移）；以为绝对定位总以父元素为原点（以最近的非静态定位祖先为原点，全静态则以 body/html）

提示

以下示例存在图片路径问题，可移步查看 https://books.openxy.com/web_front/06/position.html

什么是定位?

浏览器在决定了每个元素的盒子尺寸之后,另一关键点就是如何为每个元素确定在文档中或屏幕窗口中的位置(坐标值)

有四种基本的定位机制：静态定位、相对定位、绝对定位、固定定位,可使用position属性进行设置

静态定位 static

浏览器的默认定位方式，即按照html文档的代码顺序（即文档流）进行依次定位

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

相对定位 relative

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

先假设元素仍然按静态定位确定位置，然后以此位置为参考原点，根据设置的偏离值获得实际的位置,但所占空间仍然保留。并且可以其它元素重叠

换言之,如果你为元素设置了相对定位,但未设置偏离值,则该元素的显示和静态定位并无区别.但是,该元素的状态将变为已定位元素,可以成为绝对定位的参考原点.

绝对定位 absolute

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

一旦设置绝对定位，该元素就好象被从文档流中删除，该元素也就将失去了在正常文档流中所占的位置与空间.

该元素的新位置将以距离其最近一个且不是静态定位的祖先元素为坐标原点进行偏移。并且将转型为一个块状盒子，而不论原来它在正常流中属于何种类型。

如果所有的祖先元素都是静态定位的，则默认为最顶层元素，即<body>或<html>

由于演示的需要，本例中刻意拉长了文档的高度，所以需要滚动页面后才能看到被绝对定位的头像。

绝对定位的用途

绝对定位之后，特别是对多个元素都进行绝对定位之后，文档将获得Z轴的视角，即相当于在原文档空间上方形成多个定位层。可以通过设置z-index属性，对这多个绝对定位后的元素给出z轴的排列顺序。

由于绝对定位的空间坐标值是绝对坐标,不受普通的元素限制，所以常常用于实现浮层窗口,广告条之类的效果。

固定定位 fixed

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

是绝对定位的一种变形，即其参考原点将是屏幕可视区域，而不是文档区域。常用来实现诸如顶部固定导航等效果。

文档区域的长宽度,是由文档的内容和样式设置共同决定的.而屏幕可视区域的高宽度则是物理屏幕及浏览器窗口的大小决定的当文档区域的长度 > 屏幕可视区域的高度,会出现纵向滚动条当文档区域的宽度 > 屏幕可视区域的宽度,会出现横向滚动条

浮动 float

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

浮动的最初用途是实现文字环绕的效果。如同绝对定位,元素将失去其在文档流中的位置和空间，重新按浮动的方向定位.与绝对定位不同的是，它位置坐标的参考原点或浮动范围只能是父元素，且不能与其它元素产生重叠,而是产生环绕的效果

对于块元素，浮动使得它们表现的像内联元素一样，漂浮起来，横向排列。这个特性将用于后文中的布局

注意示例中图片的上沿,完全与父元素边框重合,既使我们设置了margin-top也无效(只能用padding-top)，这就是漂浮的特征.

未清除的浮动

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

本示例改向右浮,尽管按代码顺序图片应在左边,但实际却漂浮到了右边(即以父元素的右边界为参考起点)

但下方的<h2>标题显示不正常,这是因为本示例刻意减少了<p>中的字数.使得#page元素的实际高度(正如示例效果中的边框所示)小于图片高度,而后续元素<h2>按静态定位紧随其后,但其右侧接触到已浮动的图片,从而产生了未期待的环绕效果

如果将<p>的字数增加,会发现显示又正常了,这是因为<p>元素的高度增加了,从而使后续元素不再接触到浮动的图片

清除浮动

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

本示例在<p>元素后增加了一个空的块元素,然后设置了一个清除属性,其效果相对于通知浏览器,将浮动元素的高度重新计入父元素的高度(注意示例中父元素的边框),即浪子回家了

定位小结

方式	坐标原点	偏移方式	空间重叠
静态	前一元素	无	不可重叠
相对	原定位位置	设计师指定	原空间仍保留,可与兄弟元素重叠
绝对	最新已定位的父元素	设计师指定	可与任何元素重叠,顺序由z-index设定
浮动	父元素	根据浮动方向自动计算,不能精确指定	不可重叠,遇见文本元素,则环绕

语法参考

深入阅读

定位
- http://bbs.appcan.cn/home.php?mod=space&uid=5639&do=blog&id=108
- http://www.cnblogs.com/dolphinX/archive/2012/10/13/2722501.html
z-index
- 七阶层叠 http://www.cnblogs.com/bfgis/p/5440956.html
- 深入理解CSS中的层叠上下文和层叠顺序 http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

定位 ​

元信息 ​

提示 ​

什么是定位? ​

静态定位 static ​

相对定位 relative ​

绝对定位 absolute ​

绝对定位的用途 ​

固定定位 fixed ​

浮动 float ​

未清除的浮动 ​

清除浮动 ​

定位小结 ​

语法参考 ​

深入阅读 ​

定位

元信息

提示

什么是定位?

静态定位 static

相对定位 relative

绝对定位 absolute

绝对定位的用途

固定定位 fixed

浮动 float

未清除的浮动

清除浮动

定位小结

语法参考

深入阅读