css的定位

首先，原谅我啰嗦一下，就是介绍一下关于css的布局，有这么三种：文本流，绝对定位，固定位置；

文本流就是我们最常用的，也就是让元素按班就部的排列，让块元素和内联元素和谐的布局。但是当我们要使用一些底部栏之类的效果，这时候就要把他们固定在底部，这就是固定位置，还有一种情况，那就是我们的标题栏中要求设置标题居中，两边各自有按钮的时候，我们就要用到绝对布局，可能会问我i为什么不把相对布局给拿出来，请慢慢悦读下去

相对布局与绝对布局也就是我们常用的relative还有absolute；

在这两个布局有一个共同点，就是都可以使用top，bottom等，但是还有一个大区别，就是相对布局是不脱离文本流的，而绝对布局是脱离文本流的，什么意思？

给个例子：

<div style="width: 100%;height: 50px;background: #808080;"></div>
        <div style="width: 100%;background: #EEEEEE;line-height: 2.0;position: absolute; text-align: center;" class="container">
            <div style="left: 0;top: 0;position: absolute;"></div>
            <div style="position: absolute;top: 0;right: 0;"></div>
            <span>这是文本</span>
        </div>
            <div style="width: 100%;background: #EEEEEE;line-height: 2.0;position: relative; text-align: center;" class="container">

在这里，我们可以看到有三个absolute，建议运行一下，会发现第二个div被“隐藏”起来了，这是因为他脱离文本流了，也就是他的兄弟是不认他，直接无视他，插上去了，所以造成了呗隐藏了的假象，实际上是被覆盖了，

接下来，讨论下relative的情况下，他没有脱离文档流，所以他的兄弟就认他，就不会覆盖他，就是这么简单

对于布局的使用：

按照官方的解释，使用布局的时候，他会根据有“定位”的父级去“认亲”，如果没有，就去找他爷爷，但是！绝对不会找他二爷爷，按照这样，如果祖宗十八代都不是，那么直接就认“html”根目录。

因此，我们在使用标题栏的时候，通常是这么做的：

        <div style="width: 100%;background: #EEEEEE;line-height: 2.0;position: relative; text-align: center;" class="container">
            <div style="left: 0;top: 0;position: absolute;"></div>
            <div style="position: absolute;top: 0;right: 0;"></div>
            <span>这是文本</span>
        </div>

这也是为什么那么多的boke，视屏都说父级使用相对布局的原因，