html中定位详解

首先，我们来讨论一下html中共有几种定位方式：静态定位（static），相对定位(relative),绝对定位(absolute,fixed).其中fixed又叫固定定位，它是属于绝对定位的一种，但是又有所不同。下面我就来具体讲解一下。

 

首先,static定位就是我们html中默认的定位方式，就是元素就是从上到下，从左到右。

相对定位（relative），相对定位。元素设置了相对定位后，元素是相对于他原来的位置发生偏移，但是元素并没有脱离标准文档流，也就是他原来的位置还是存在的，其他元素不能移到他的原来位置（相当于虽然他原来位置没有东西了，但是位置还是占着的，其他元素不可以移到该位置上）。

绝对定位（absolute）。绝对定位比较复杂了，首先我们结合绝对定位和固定定位一起来讲解

首先，相同点。

绝对定位不是相对于自己原来位置的偏移。

两者都会脱离标准文档流，这句话是什么意思？其实估计大家都不是很清楚，也就是说他移动后他原来的位置就空了，后面的元素会自动移动上去，其次，他现在的位置也不再标准文档流当中，也就是说他现在的相当于浮动在标准文档流之上。

不同点：

首先分两种情况来讨论

一，设置了偏移量

 举一个例子： postition:absolute ;left:23px;top:12px;或者postition:fixed ;left:23px;top:12px;这样的话设置absolute方式的是相对于距离他最近的祖先元素，且该祖先元素也设置了定位方式。来偏移的。而fixed则是相对于body元素的位子来偏移的。

第二种情况：设置了定位，但是没有设置偏移量时，两者都是相对于父类来说的，他们都会移动到父类的左上角。

第二个不同点：

设置了fixed的定位方式的元素是不会随着滚动条的滚动而发生位置的变化的，而设置abslute的定位方式的会发生未知的变化。