【零基础学习web前端】CSS布局-position定位
我们使用position属性设置元素的位置。
- absolute 绝对定位
- relative 相对定位
- fixed 固定定位
元素的位置也由顶部，底部，左侧和右侧属性控制。
但是，除非先设置position属性，否则这些属性将不起作用。
固定定位（fixed）不会随鼠标的滚动而改变位置，是固定在屏幕的某一个位置。
绝对定位（absolute）的定位原点是非默认定位（static）的父节点，
可以是（absolute fixed relative）。如果没有这些，定位原点就是body。
fixed和absolute都会元素使原本占用的布局 空间脱离文档流。
下面分别是默认布局，和使用绝对定位（absolute）之后的
图示效果：
代码为：
[CSS] 纯文本查看 复制代码 div {
background: blue;
color: #fff;
font-size: 30px;
position: absolute;
}
h1{
border: 1px solid red;
}
[HTML] 纯文本查看 复制代码 <h1>苏飞论坛</h1>
<div>欢迎您</div>
<h1>c#爬虫论坛，最牛HttpHelper万能框架</h1>
<html>
相对定位（relative）是相对原有位置定位，且元素原来占用的布局空间仍保留在文档中
上例中使用relative定位后的效果：
如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，
因为它不受父级元素的padding的属性影响，此时子代的定位原点就是父级元素的左上角。
| 
窥视卡
雷达卡
发表于 2018-12-4 17:04:15
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡