定位（position）

静态定位

静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置

 position: static;

相对定位

相对定位它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。

position: relative;

如何修改元素的位置？

需要使用top，bottom，left和right属性来精确指定要将定位元素移动到的位置（这些属性的值可以采用逻辑上期望的任何单位 ——px，mm，rems，％等。）

top: 30px;
left: 30px;

绝对定位

position: absolute;

绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。

这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 ——例如弹出信息框和控制菜单，翻转面板，可以在页面上的任何地方拖放的UI功能等。

top，bottom，left和right以不同的方式在绝对定位。它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。

z-index

更改堆叠顺序，可以使用z-index属性。 “z-index”是对z轴的参考。网页也有一个z轴——一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。z-index 值影响定位元素位于该轴上的位置——正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。

z-index: 1;

注意，z-index只接受无单位索引值；你不能指定你想要一个元素是Z轴上23像素

固定定位

定位覆盖——fixed。

与绝对定位的工作方式完全相同，只有一个主要区别——绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。这意味着您可以创建固定的有用的UI项目，如持久导航菜单。

h1 {
  position: fixed;
  top: 0;
  width: 500px;
  margin: 0 auto;
  background: white;
  padding: 10px;
}

top: 0; 是要使它贴在屏幕的顶部；

定位实例练习

列表消息盒子

实现经典的选项卡消息框，如图：

HTML/CSS 学习布局

把一切的服务放在一个单独的文件上可以减少HTTP请求的数量来浏览所有内容，从而提高性能。

一般设置

屏幕居中CSS：（标签内各容器具有相同的宽和高，使之和谐）

width: 450px;

height: 400px;

margin: 0 auto

样式化选项卡（同行显示 li ）

list-style-type被设置为 none 用以去除项目符号，宽度（width）设置为 150px 以便于适应这个info-box。

链接（ <a> ）元素设置为display inline-block，这样他们将在一行显示，仍然保持样式可设置，他们会被样式化合适的选项卡按钮，通过一系列的其他属性。

在链接状态上设置一些样式。（鼠标悬停和点击效果的设置）

首先，我们要设置标签的 :focus 和 :hover 状态，让他们在获得焦点/鼠标悬浮的时候看起来不同，给用户提供一些可视化反馈。

其次，当某个选项卡的类（ class ）出现 active 时，我们为其设置一条相同的样式规则。

样式化面板

首先，添加下列的规则去样式化 .panels <div> 容器。我们简单的设置一个固定的高度，确保面板包含在info-box里面，position relative 设置 <div> 为定位上下文，这样你能相对自身放置定位子元素，而不是相对<html>元素，

最后我们清除（clear）浮动，设置在上面CSS中，这样避免影响布局的剩余部分。

对包含我们面板的单独 <article> 元素设置样式。我们添加的第一条规则就是绝对定位面板，让他们都位于<div>容器的左上角——这一部分对整个布局特性是关键的，就像使面板互相位于顶部。规则设置面板为和容器同样的高度，给内容一些内边距，设置字体颜色（color），和背景颜色（background-color）。

添加的第二条规则，对带有类（ class ）为（ active-panel ）的面板，设置z-index 为 1，会让他位于其他的面板之上（默认定位元素 z-index 的值是 0，会使默认元素位于下面）。

添加JavaScript

首先我们保存所有的选项卡和所有的面板引用到两个变量中，名为 tabs和 panels，这样此后我们可以容易地为它们做事。
然后我们使用 for 循环遍历所有的选项卡，并且在每一个上运行叫做setTabHandler() 的函数，此函数建立当每个选项卡被点击时应该发生的功能。运行时，函数会被传递选项卡，和一个索引数i 指明选项卡在tabs 数组中的位置。
在setTabHandler()函数中，这个标签创建了一个onclick事件来处理点击，所以当标签被点击的时候，接下来会发生：
一个for循环用开清除所有标签当前存在的类
当点击的时候在标签上创建了一个active 类——从相关联的元素中继承了CSS的一些属性，具有和panels的样式相同的颜色，背景颜色。
一个for循环用开清除所有面板当前存在的类
当标签被点击的时候在和标签相对应的面板上创建了一个active-panel 类——从相关联的元素中继承了CSS的一些属性，使他的z-index属性被设置为1，让他能位于所有的面板的上面。

代码及预览 https://codepen.io/WanruDu/pen/YvXzyG

一个固定位置的列表消息盒子

把上述例子加到一个满的网页之中去。但是不仅仅是这样——我们将固定她的位置，以便于他能待在浏览器窗口的同一个位置。当主要内容滚动时，这个消息盒子将会待在屏幕的同一个位置。

1、添加HTML

2、更改存在的CSS

删除margin: 0 auto （不需要居中显示）；

添加fixed定位；

调整top 属性把它粘在浏览器的视域。

3、对主内容样式设计

给这个内容和消息盒子面板一样的背景颜色，颜色，内边距。然后给他一个大的margin-left使他移动到右边，为消息盒子在左边腾出位置，以便于各个部分不重叠。

代码及展示：https://codepen.io/WanruDu/pen/dKoyrz

一个滑动隐藏的面板（通过按图标使面板滑动出现或者消失）

代码及展示：https://codepen.io/WanruDu/pen/aKOBpR

秒客网