html与css定位技术
一、position:absolute(绝对定位)
html代码：
<div></div>
css代码：
{
position:absolute;
left:100px;
top:100px;
}
注意：
left也可以换成right,表示右边线距离右边浏览器边框多少距离
top也可以换成bottom,表示下边线距离底部边框多少距离，一般不设置bottom,都设置top.
left与right只能出现一个
bottom与top也只能出现一个
<body>有一个自带的margin是8px，通常在编程的时候，会将这个margin去掉，会这样写：
*{
margin:0;
padding:0;
}
只有当把margin设置为0的时候，才能使body中的盒子贴着浏览器的边框显示。
性质：
1.当一个元素使用绝对定位的时候，它就会脱离原来的层，跑到上一层。
2.相对于最近的有定位的父级进行定位，如果没有这样的有定位的父级，那么相对于文 档进行定位。
举例如下：
html代码为：
<div class="demo"></div>
<div class="box"></div>
css代码为：
*{
margin:0;
padding:0;
}
.demo{
position:absolute;
width:100px;
height:100px;
background-color:red;
opacity:0.5;
}.box{
width:150px;
height:150px;
background-color:green;
}
显示效果如下：
虽然是div，但是绿色方块和红色的方块在同一个地方显示，有重合，明显的层叠效果，原因是demo这个盒子设置了绝对定位，它就会脱离原来的层，跑到上一层，那么原本在下面显示的绿色盒子就会跑到原来demo这个红色盒子的位置上，给demo盒子加了透明度，可以更清除得看到层叠显示。
二、position：relative（相对定位）
注意：和绝对定位的作用差不多，都可以设置left,right,top,bottom,来给盒子定位
相对定位是相对于原来自己出生的位置进行定位。
但是，不同点在于：
relative定位是保留原来的位置，同时又跑到了另一个层上去。如果给一个盒子“demo”相对定位了，那么写在其后面的盒子就不会移动到原来“demo”这个盒子的位置上去，原因是原来demo这个盒子的位置任然被占用着。但是真正的demo已经跑到了另一层上去了。
举例如下：
html代码：
<div class="demo"></div>
<div class="box"></div>
css代码：
*{
margin:0;
padding:0;
}
.demo{
position:relative;
width:100px;
height:100px;
background-color:red;
opacity:0.5;
}
.box{
width:150px;
height:150px;
background-color:green;
}
显示效果如下：
如果在css代码里的.demo{}里面加上left:100px;top:100px;即给这个盒子进行一个定位，那么会出现下面的结果：
补充：
position:relative;
right:10px;*/
举例如下：
html:
<div class="demo">
<div class="box"></div>
</div>
css:
*{
padding:0;
margin:0;
}
.demo{
width:200px;
height:200px;
position:relative;
top:200px;
left:200px;
background-color:green;
}
.box{
width:100px;
height:100px;
position:relative;
background-color:red;
bottom:20px;
}
效果如下：可以看到红色方块上移了20px,因为它设置了bottom:20px;是相对于自己原来出生的位置的下底边20px
html与css定位技术html与css定位技术
三、position:fixed（固定定位）
可以让该定位元素定位到可视页面的某一个固定位置，不会随着滚动条的滚动而移动。
举例如下：
居中,不随滚动条滚动而移动
html代码：
<div></div>
<br>//此处有1000个<br>,为了生成滚动条
css代码：
div{
position:fixed;
left:50%;
top:50%;//这两句只是将该方块的左顶点挪到了浏览器页面的正中间。
margin-left:-50px;//将该方块向左移动50px(移动的像素多少是根据所要居中盒子的大小来决定的)
margin-top:-50px;//将该方块向上移动50px
width:100px;
height:100px;
background-color:red;
z-index: 1;//正常的层是0,数字越大，层越靠近自己，也就是越先看到它。
border-radius:50%;//会变成正圆
}
显示效果如下：
这个圆不会随着滚动条的滚动而移动，而且在视窗的正中央定位
补充：如下设置一个方块，定位为fixed,他是相对于浏览器的可视区窗口进行的定位,设置了bottom:20px以后，相对于浏览器的最低端的距离是20px
<div style="width:100px;height:100px;background-color:red;position:fixed;bottom:100px"></div>
效果如下：