position:absolute;脱离文档流的条件还需要加top:0;left:0

定位属性：position （脱离文档流）
position:relative; 相对定位（相对于元素本身位置进行移动）
position:absolute; 固定定位（相对于父辈级元素有定位属性position来移动；否则以浏览器为准）
position:fixed; 绝对定位（只相对于浏览器来定位；与父辈级是否有定位属性position无关）
position:inherit; 继承（只继承父级的定位属性【前提：父级有定位属性】）

导航栏分类再分类：                <div class="">总框架                        <div class="">导航一级标题                                         <ul class="">二级标题框架                                                    <li>二级标题                                                                                                                 <div class="">三级标题                                                         </div>                                                    </li>                                                    <li>二级标题</li>                                                    <li>二级标题</li>                                         </ul>                                    <div>                </div>

鼠标指向导航栏1级出现2级时：                           1级:hover 2级{                                           display:block;                                                                                      }                           2级{                                  display:none;                               }

登录设计：半透明遮罩和登录的固定定位方式

登录页面水平和垂直居中的原理：div先相对于网页left和top50%fixed定位，然后使用margin-left和margin-top负div宽和高的一半，可以得到居中的登录页面

定位属性：position （脱离文档流）
position:relative; 相对定位（相对于元素本身位置进行移动）
position:absolute; 固定定位（相对于父辈级元素有定位属性position来移动；否则以浏览器为准）
position:fixed; 绝对定位（只相对于浏览器来定位；与父辈级是否有定位属性position无关）
position:inherit; 继承（只继承父级的定位属性【前提：父级有定位属性】）

当父元素不具备定位属性时，则组元素会以窗口的4个角作为原点进行定位

relative相对于自己原来的位置进行相对定位 absolute相对于最近的父级元素进行定位 fixed始终相对于浏览器窗口进行对位 顺便说一下，fixed就是特殊的absolute absolute绝对定位，相对于最近的已经定位（position为absolute或者relative的元素）的祖先元素 如果没有就一直往上找，直到body即相对当前窗口定位 以窗口四个边为标准定位   relative相对定位，相对于本元素原始位置进行定位  一般来说是左上顶点

relative:left&top 以原点向右为x轴，向下为y轴         可以理解为距离左边 距离上边         right&bottom 以原点向左为x轴，向上为y轴          仍然是相对同一原点 但是与上面的反方向了 相对于网页的最左最上顶点移动  

HTML 中的三种布局方式 1.标准流 2.浮动 3.定位 布局元素分类： 1.块级元素：div table h1-h6  有序无序列表 p段落标记 2.内联元素： a 超链接  span 文字 img 图片 input 控件 区别：块元素：独占一行；内联元素是和相邻的内联元素在同一行。

html布局方式：1标准流  2浮动 3定位

当设置position:absolute 的时候，整个html是没有高度的，说明这个元素已经脱离了文档流，但是元素本身还是有高度的。当设置position的时候才会产生重叠，所以在position的情况下才能用z-index，数字越大，层级越高。还有一种情况产生重叠，margin-top: -100px, 这种情况下不能用z-index。

以原点有起始点，向左为正，向上为正。当position:relative top:50px right: 50px  这时候元素向左和向上缩进50px。而不是向右和下。

z-index只能作用在带有定位的元素。
父元素的z-index会影响其子元素的层级。

登录设计：半透明遮罩和登录的固定定位方式

定位属性：position （脱离文档流）
position:relative; 相对定位（相对于元素本身位置进行移动）
position:absolute; 固定定位（相对于父辈级元素有定位属性position来移动；否则以浏览器为准）
position:fixed; 绝对定位（只相对于浏览器来定位；与父辈级是否有定位属性position无关）
position:inherit; 继承（只继承父级的定位属性【前提：父级有定位属性】）