html中position是什么用途？position的用途介绍
position的四个属性值：
1.relative
2.absolute
3.fixed
4.static
下面离别讲述这四个属性。
<div id="parent">
<div id="sub1">sub1</div>
<div id="sub2">sub2</div>
</div>1. relativerelative属性相对照较简便，我们要搞清它是相对哪个对象来停止偏移的。答案是它本身的位置。在上面的代码中，sub1和sub2是同级关系，假如设定sub1一个relative属性，比方设定如下CSS代码：
#sub1
{
position: relative;
padding: 5px;
top: 5px;
left: 5px;
}我们可以这样懂得，假如不设定relative属性，sub1的位置依照正常的文档流，它应当处于某个位置。但当设定sub1为的position为relative后，将按照top，right，bottom，left的值依照它理应所在的位置停止偏移，relative的“相对的”意思也正表现于此。
关于此，您只需要记住，sub1假如不设定relative时它应当在哪里，一旦设定后就依照它理应在的位置停止偏移。
随后的问题是，sub2的位置又在哪里呢？答案是它本来在哪里，此刻就在哪里，它的位置不会由于sub1增添了position的属性而发生改动。
假如此时把sub2的position也设定为relative，会发生什么现象？此时仍然和sub1一样，依照它本来应有的位置停止偏移。
留意relative的偏移是基于对象的margin的左上侧的。
2. absolute
这个属性总是有人给出误导。说当position属性设为absolute后，总是依照阅读器窗口来停止定位的，这其实是错误的。实际上，这是fixed属性的特点。
当sub1的position设定为absolute后，其到底以谁为对象停止偏移呢？这里分为两种状况：
（1）当sub1的父对象(或曾祖父，只如果父级对象)parent也设定了position属性，且position的属性值为absolute或者relative时，也就是说，不是默许值的状况，此时sub1依照这个parent来停止定位。
留意，对象虽然肯定好了，但有些细节需要您的留意，那就是我们到底以parent的哪个定位点来停止定位呢？假如parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开端的地方(即只从padding的左上角开端)停止定位，也就是忽略padding，当然并不会忽略margin和border。
接下来的问题是，sub2的位置到哪里去了呢？由于当position设定为absolute后，会致使sub1溢出正常的文档流，就像它不属于 parent一样，它漂泊了起来，在DreamWeaver中把它称为“层”，其实意思是一样的。此时sub2将获得sub1的位置，它的文档流不再基于 sub1，而是直接从parent开端。
（2）假如sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，依照阅读器的窗口停止定位，这个比力容易懂得。
3. fixed
fixed是非凡的absolute，即fixed总是以body为定位对象的，依照阅读器的窗口停止定位,即便拖动滚动条，他的位置也是不会改动的。与background-attachment:fixed类似
当然在Dreamweaver下好像没有支撑
4. static
position的默许值，一样不设定position属性时，会依照正常的文档流停止摆列。
以上就是html中position是什么用途？position的用途介绍的具体内容，更多请关注百分百源码网其它相关文章！
