CSS中position的定位主要分为静态定位，相对定位，绝对定位和固定定位，属性值分别为：static，relative，absolute，fixed；元素的位置通过 "left", "top", "right"， "bottom" 属性进⾏规定，其中优先级为：top>bottom,left>right。
：静态定位。
这时候我们把img的css代码设置成这样：
可以看出，图⽚在原来位置的基础上，向右移动了150px，向下移动了200px，并且红⾊div元素仍然在它原本的位置上，并没有因为img
这是因为虽然图⽚的位置发⽣了变化，但他原来的位置仍然保留着，没有脱离⽂档流。
元素的移动⽽产⽣位置上的变化，这是因为虽然图⽚的位置发⽣了变化，但他原来的位置仍然保留着，没有脱离⽂档流。
：绝对定位。
它是相对不是static的最近⼀级⽗元素来进⾏定位的，如果没有这样的元素，那么就相对body元素来进⾏定位，被定位元素会脱离⽂档流，
我们发现蓝⾊div虽然是红⾊div的⼦级元素，却并没有在红⾊div的内部，⽽是在加上position：absolute属性后直接相对body元素定位到了右侧。
那么试着在红⾊div的CSS内加上position：relative；看看会发⽣什么。
#red{
width: 400px;
css设置表格滚动条
height: 400px;
background-color: red;
position: relative;
}
我们发现，当蓝⾊div的⽗级红⾊div内加上position：relative；后，蓝⾊div变成相对于红⾊div定位了。
从这⾥我们可以看出，当⼀个元素设置了position:absolute属性之后，⽽它的⽗级元素的属性为positio
n:relative时，它不再是相对于⽂档定位，⽽是相对于⽗元素定位。最重要的是，⽗元素设置为position:relative并不会脱离⽂档流，也就是说利⽤给⽗元素设置
position:relative属性，再将⼦元素设置为position:absolute就可以在⽂档流中实现需要的定位，这是⼀种常见的⽅法。
fixed：固定定位。
固定定位是最好理解的，它相对于浏览器的窗⼝进⾏定位并脱离⽂档流，即使拖动滚动条，元素的位置也是不变的，我们使⽤浏览器时⼀些⼴告的效果就是这样的。
看看代码：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。