定位
静态定位绝对定位相对定位固定定位静态定位
缺省时,即为静态定位静态定位是指各个元素在html文档流中应有的位置,根据HTML超文本传输协议,浏览器在接受和解析网页时,是遵循从上往下来显示的静态定位时,无法通过left、right、top、bottom来设定元素的位置
绝对定位
代码如下(示例):
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">body,div,h1,h2 {margin: 0;padding: 0;}#container {border: solid 1px #FF0000;}#container h2 {position: absolute;border: solid 1px #0F0;left: 100px;top: 100px;}</style></head><body><div id="container"><h1>ABCDE</h1><h2>12345</h2></div></body></html>
绝对定位从上面的演示,我们知道,因为h2使用了position,使得h2从div元素中脱出,从而跟之前h2没有使用position时,div变小了,这就是绝对定位的体现
相对定位
相对定位是一种折中的定位的方法,它既不像静态定位那样,保持原来的位置;又不像绝对定位那样脱离出文档流。相对定位是它允许它自身相对静态定位进行偏移,但又不将该元素脱离出文档流相对定位是一种不脱离文档流的定位方式相对定位是唯一一个可以使多个元素互相覆盖,且不改变文档流的定位方式
固定定位
他特有的点是以浏览器的窗口来定义以自己的位置,不管浏览器是否滚动还是浏览器的大小,他始终出现在浏览器的一个固定的位置(比如菜单)
对上述相对定位、绝对定位、固定定位进行操作:
代码如下(示例):
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">body,div,h1,h2 {margin: 0;padding: 0;}#container {border: solid 1px #FF0000;}/*相对定位#container h2 {position: absolute;border: solid 1px #0F0;left: 100px;top: 100px;}*//*绝对定位* #container h2 {position: relative;border: solid 1px #0F0;left: 0px;top: -50px;}*/#container h2 {position: fixed;border: solid 1px #0F0;left: 0px;top: 0px;}</style></head><body><div id="container"><h1>ABCDE</h1><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>aaa/*为了能让宽口滚动*/<h2>12345</h2></div></body></html>
包含块