Html Css Position

已经分享到：http://jingyan.baidu.com/article/ed2a5d1f27d8db09f6be172f.html

记录一下自己对Css的定位Position的理解

　　Position的值有4中，分别是static(静态的，默认)，absolute(绝对定位)，relative(相对定位)，fixed，inherit(ie8一下都不支持)，本文主要记录对absolute和relative的理解。

Ps：先说一下层div元素的实际原点是层的左上角的位置，相对于浏览器的left:0px;top:0px;如果层加上margin-top或margin-left，则实际原点是减去margin-top或减去margin-left。

1.static：浏览器默认值，静态的，left，top，bottom,right,z-index不影响其定位,在远行中,值始终保持不变

2.fixed：生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

3.inherit：从父元素继承Position值，其值在运行过程中,可以改变 ，ie8一下不支持

4.absolute
假设存在父元素，否则父元素为浏览器

.parsent{
　　width:100px;height:300px;background-color:green;
　　margin-top:10px;padding-top:10px;
 }
.children{
　　width:200px;height:100px;background-color:black;
　　position:relative;left:80px;top:50px;
　　margin-top:10px;padding-top:10px;
}

(.parsent)位置S1(0,-10)层可视左上角(相对于浏览器的左上角)
(.chidren)位置S2(80,-60)层可视左上角
S1.y=0-S1.margin_top=-10;
S2.y=0-S2.margin_top-S2.top=-60px;

则S2的top=S1.y-S2.y=50px;

5.relative 
假设存在父元素，否则父元素为浏览器

.parsent{
　　width:100px;height:300px;background-color:green;
　　margin-top:10px;padding-top:10px;
 }
.children{
　　width:200px;height:100px;background-color:black;
　　position:absolute;left:80px;top:50px;
　　margin-top:10px;padding-top:10px;
}

(.parsent)位置S1(0,-10)层可视左上角(相对于浏览器的左上角)
(.chidren)位置S2(80,-80)层可视左上角
S1.y=0-S1.margin_top=-10;
S2.y=0-S2.margin_top-S2.top-S1.margin_top-S1.padding_top=-80px;

则S2的top=S1.y-S2.y-S1.padding_top-S2.margin_top=50px;　

转载于:https://www.cnblogs.com/chenche/archive/2013/03/05/2943910.html