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来设置它们的堆叠顺序 。