【web】绝对定位与相对定位
2018-07-17 本文已影响0人
jenye_
【参考博客】:前端女侠-详解CSS的相对定位和绝对定位
在通常情况下，元素的position属性的默认值为：static。也就是没有定位。
如果此时给元素设置left,right,bottom,top这些偏移属性都是没有效果的。
而通常情况下，我们的确也用不到position，但是在一些特殊的情况，我们不得不用到。
相对定位(relative)
- 元素首先出现在文档流的中它所该在的位置。
- 通过设置偏移量(left,right,bottom,top)设置水平偏移和垂直偏移（相对初始位置偏移）。
-
需要注意的是，偏移之后，该元素仍然占据的是原来的空间。(其他元素不会填补，该元素也不会挤开别的元素)
图来自前端女侠
如图设置了top和letf偏移，蓝色的矩形移动的了位置但是所占的空间仍然是虚线位置。
更加直观的理解：
设置了浮动，让三个矩形在一排
增加了reletive之后，蓝色虽然飞了，但是黄色并没有填充上来。
当然也不会挤开别的元素
此时我们就可以这只z-index来设置叠加顺序了
绝对定位(absolute)
如果元素被设置了绝对定位，那么它在文本流中将不占空间。该元素和设置了relative相似，元素浮动起来了。
与relative的区别：区别在于，设置了relative的元素在浮动起来后占据初始所在的看空间，而设置了absolute会删除该元素在文档流中的位置，完全从文档流中抽离出来。
同样可以使用z-index设置叠加顺序。
绝对定位是如何定位的？
(转自前端侠女)
- 首先，如果它的父元素设置了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定。
- 如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位 ，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位（比如position:relative）的第一个祖先元素。
- 如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非窗口,相对于窗口定位的是fixed)
找到参照物：
我们看一下在浏览器里的效果，我们先看看没有使用绝对定位时的样子：
然后我们给第二个块设置绝对定位：position:absolute 然后再设置一个偏移：left:150px;top:40px; 这时就变成了下图所示：
注：偏移量可以取负值
定位实例：
购物车上的数字
