css定位有哪几种方式?
一、position 定位
position取值
1.static(默认)
2.relative : 相对定位
特点:
(1) 如果没有定位偏移量,对元素本身没有任何影响
(2)不使元素脱离文档流,空间是会被保留。
(3)不影响其他元素布局
(4)left、top、right、bottom是相对于当前元素自身进行偏移的
效果图如下:
首先写入三个盒子:
然后写入相对定位看一下效果:
3.absolute(绝对定位)
特点:
(1)会使元素完全脱离文档流。
(2)是内联元素支持宽高;使块元素默认宽根据内容决定。
(3)生成绝对定位的元素,相对于定位(除了static的其他定位)的祖先元素进行偏移,若没有定位祖先元素,则相对于整个页面进行偏移。如果定义了多个祖先元素,生成绝对定位的元素相对于离其最近的祖先元素(父元素)进行偏移。
例如:
然后加入绝对定位:就会发现绿色盒子脱离文档流
再如图:
然后加入绝对定位:
就会发现若没有定位祖先元素,则相对于整个页面进行偏移。如果定义了多个祖先元素,生成绝对定位的元素相对于离其最近的祖先元素(父元素)进行偏移。
- fixed(固定定位):
特点:
(1)使元素完全脱离文档里。
(2)使内联元素支持宽高;使块元素默认宽根据内容决定。
(3)相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响。
(4)不会受其祖先元素的影响。
如下图所示:
就会发现这个红色方块会一直固定在左上角,且不回收滚动条的影响。 - sticky(黏性定位)
特点:sticky相当于是static和fixed的结合体。给position:sticky;定义一个位置,在没滑到那个位置之前,和没有定位没有区别,但是当滑动到定义的位置之后,就产生了固定定位的特性。
如下图所示HTML代码:
CSS代码:
运行效果如下图所示;
没有滑动到.show距离top100px的时候,跟没有设置定位没区别,都随着滚动条的滑动而移动。
当.show到达距离top100px的位置时:
就会发现当滚动条滑到一定位置,该红色标签就会固定在指定位置。