小白也能看懂的前端知识之五：元素定位（相对定位、绝对定位、固定定位）

 

一、静态定位：static

position：static；静态定位，如果没有手动设置position的话默认值就是这个。这个属性有什么用呢，一般不需要设置，但是当你给一个有定位的元素添加点击事件，想把它改成没有定位的话就用到了这个属性。比如：

$('.header').on('click', function() {
    $(this).css('position', 'static');
});

二、相对定位：

position: relative;相对定位是相对于不设置定位属性时候的自身位置，比如：

1. 没有定位的时候是这样：(小tips：这个红框的宽高是浏览器默认的margin，每个浏览器都不一样)

 2. 有相对定位的时候是这样：红框的宽高就是相对行为设置的left，top

 三、绝对定位

position: absolute;相对于有定位的祖先元素的定位，先找父级元素，如果父级元素没有定位就往上找，一直到body，都没有定位就相对于body（小tips：绝对定位通常需要配合相对定位使用）

1. 父级元素.parent有相对定位是这样的（这里把.parent的margin-left设为20px看下效果）：

2. 父级元素.parent有相对定位是这样的（.child就相对于body定位）：

四、固定定位

position: fixed;相对于窗口的定位（你最讨厌的不管怎么划都在固定位置的广告就是用这个做的）

1. 页面滚动之前在相对于窗口这个位置：

2. 滚动之后还是在相对于窗口这个位置 ：

五、inherit：继承父级元素的定位属性 

六、unset：不设置定位属性，也就是恢复默认值