定位（静态定位、绝对定位、相对定位、固定定位）
定位
- 静态定位
- 绝对定位
- 相对定位
- 固定定位
静态定位
- 缺省时，即为静态定位
- 静态定位是指各个元素在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>- 包含块
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！