css定位
1.css定位
改变元素在页面上的位置
2.css定位机制
-1.普通流：元素按照其在HTML中的位置顺序决定排序的过程
-2.浮动
-3.绝对布局
3.css定位属性
position 把元素放在一个静态的，相对的，绝对的，或者固定的位置中
top 元素向上的偏移量
left 元素向左的偏移量
right 元素向右的偏移量
botton 元素向下的偏移量
z-index 设置元素的堆叠顺序
-1.posion
a.static：对象遵循常规流。此时4个定位偏移属性不会被应用。
b.relative：对象遵循常规流，并且参照自身在常规流中的位置通过Top，right，bottom，left这四个定位偏移属性进行偏移时
不会影响常规流的任何元素。
c.absolute：对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素
盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
d.fixed：与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0px; margin: 0px; } .one{ width: 100px; height: 100px; background-color: blue; position: absolute; z-index: -1; top: 100px; left: 100px; } </style> </head> <body> <div class="one"> haha </div> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111</p> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0px; margin: 0px; } .container{ width: 500px; height: 500px; background-color: aqua; margin-top: 300px; position: relative; } .in{ width: 100px; height: 100px; background-color: pink; position: absolute; top: 100px; } </style> </head> <body> <div class="container"> <div class="in"> i am inner div </div> </div> </body> </html>
