CSS 有三种基本的定位机制:普通流、浮动流、定位流。
position定位属性,检索或设置对象的定位方式
position属性值:
tatic | 默认值。位置设置为 static 的元素会正常显示,它始终会处于文档流给予的位置(static元素会忽略任何 top、bottom、left或 right 声明) |
---|---|
absolute | 相对于已经定位父级元素的绝对定位,浮出、脱离布局流,它不占据空间,就是我们所说的层,其位置相对于最近的已定位父元素而言的位置,可直接指定“left”、“top”、“right” 以及 “bottom”属性。若父级都没有定位,则以html(根元素)。(层叠的顺序z-index:value) |
relative | 是相对于默认位置的相对定位,通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方(相对于自己的开始的位置发生的位置上的移动,【不会破坏正常的布局流,占据空间】) |
fixed | 相对浏览器的绝对定位,是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否,元素都会留在那个位置。 |
sticky | 可以看出是position:relative 和position:fixed 的结合体——当元素在屏幕内,表现为relative,就要滚出显示器屏幕的时候,表现为fixed。 |
绝对定位和相对定位的区别
1、参照物不同,绝对定位的参照物是包含块(已定位的父元素),相对定位的参照物是元素本身默认的位置; 2、绝对定位将对象从文档流中拖离出来因此不占据空间,相对定位不破坏正常的文档流顺序无论是否进行移动,元素仍然占据原来的空间。
定位元素层次关系
z-index : auto |number 检索或设置对象的层叠顺序。 auto:默认值。 number:无单位的整数值。可为负数 没有设置z-index时,最后写的对象优先显示在上层(都拥有定位),设置后,数值越大,层越靠上;