重叠的2个元素，父子关系，父relative和子absolute定位。
重叠2个元素，兄弟关系，直接relative定位。
<link rel="stylesheet" href="css/style.css">
居中方法：



block，inline及inline-block的简单介绍
完整确切的说应该是 block-level elements (块级元素)
和 inline elements (内联元素)。
block元素通常被现实为独立的一块，会单独换一行；
inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满，inline元素设置宽高不起作用，需要第一步；转成块元素，再设置宽高。
大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：
常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等

display:block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性

display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

具体参考：
[css3]

js流程（所有流程）
<script src="js/script.js"></script>
第一步：获取对象
第二步：搞清楚，你获取的是类型，是数组？还是对象？搞不清楚类型=迷茫
第三步：
第四步：

querySelector：获取Dom对象
querySelectorAll：获取数组=getElementsByClassName

[设置attribute，只能是dom，不能给数组设置属性]
var a = document.getElementBy("DIV");

1.使用classList返回所选元素的类名，是一个数组，一个类名占一个长度(a.classList.length)。

2.a.classList.add("classname1") ; 添加一个类名

3.a.classList.remove("classname2") ; 去掉一个类名

4.a.classLis.toggle("classname3"); 引号中的类名，有就删除，没有就添加。比较智能的结合了1,2点，用于切换十分方便

5.a.contains("classname4"); 判断一个类型是不是存在，返回true和false

classList兼容性：除了IE，其他浏览器兼容性都可以。

//常用函数封装，少写点！，一定要写return
var getElem = function(selector){

return document.querySelector(selector);

}

var getAllElem = function(selector){

return document.querySelectorAll(selector);

}

//封装，获取元素样式
var getCls = function(element){

return element.getAttribute('class');

}

//封装，设置元素样式
var setCls = function(element, cls){

return element.setAttribute('class', cls);

}

//封装，为元素添加样式,别忘记空格，否则样式都粘在一起，=Element.classList.add()
var addCls = function(element, cls){

var baseCls = getCls(element);
if(baseCls.indexOf(cls)=== -1){
    setCls(element, baseCls + ' ' + cls);
}

}

//封装，为元素删除样式,indexOf返回-1=没找到, outline AAA，=Element.classList.remove()
var delCls = function(element, cls){

var baseCls = getCls(element);
if(baseCls.indexOf(cls)!= -1){
    setCls(element, baseCls.split(cls).join(' ').replace(/\s+/g, ' '))
}

}