html相对位置置顶,css有多少种定位方式？

css有四种定位方式，position值分别为：static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)。下面本篇文章就来给大家介绍一下这四种定位方式，希望对大家有所帮助。

css的定位方式

static(静态定位)：即默认值，元素框正常生成的，top、right、bottom、left这些偏移属性不会影响静态定位的正常显示(属性不应用)；

relative(相对定位)：元素相对自身偏移某个位置，元素仍保持其未定位前的形状，它原本所占的空间仍保留，可通过z-index进行层次分级，子元素可相对该元素进行绝对定位；

absolute(绝对定位)：元素框从文档流完全删除，相对于其最近的父级块元素(如果父级 position 为 static 时，absolute元素将以body坐标原点进行定位)，元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框，可通过z-index进行层次分级；

fixed(固定定位)：它所相对固定的对象是可视窗口，与其他无关，可通过z-index进行层次分级。

绝对定位vs相对定位

绝对定位好像把不同元素安排到了一栋楼的不同楼层(除首层，文本流放在首层)，它们之间互不影响；相对定位元素在首层，与文本流一起存放，它们之间互相影响。

被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除，它浮了起来，其实设置了相对定位也会让元素浮起来。

但它们的不同点在于，相对定位不会删除它本身在文档流中占据的空间，其他元素不可以占据该空间，而绝对定位则会删除掉该元素在文档流中的位置，使其完全从文档流中抽了出来，其他元素可以占据其空间，可以通过z-index来设置它们的堆叠顺序 。