CSS的五种定位

·  阅读 687
CSS的五种定位

CSS中使用position属性指定元素的定位类型。到目前为止,共有五种定位方式:

  • static
  • relative
  • absolute
  • fixed
  • sticky

我们可以使用top、bottom、left、right属性设置元素的具体位置,在使用这四个属性之前,我们需要先设定position属性。

一、static定位

HTML元素的默认定位方式,也可理解为没有定位,其位置遵循文档流顺序(即在排版布局过程中,元素会依照从左至右,从上至下的顺序依次排列)。注意,static定位时,top、bottom、left、right将会不起作用。

clipboard.png

2.png

二、relative定位

相对定位的元素相对其正常位置定位。注意,相对定位的元素偏移后其原来的位置将会保留。

3.png

4.png

注意:相对定位偏移后,其原来的位置保留,元素本身将会脱离文档流浮动。

三、absolute定位

绝对定位的元素相对于其已定位(除static之外的四种定位方式定位)的父元素定位,如若没有,则相对元素定位。注意,绝对定位脱离文档流,不占据空间,可与其他元素重叠。

5.png

6.png

四、fixed定位

固定定位相对浏览器窗口定位,即使浏览器窗口滚动,其位置依旧不变。

7.png

8.gif

五、sticky定位

sticky定位结合了relative定位及fixed定位,主要用在对scroll事件的监听上,当元素距离其父元素的距离达到sticky定位要求时,sticky定位相当于fixed定位,固定在某个位置,未达到定位要求前,其相当于relative定位。

9.png

10.gif 以上是对五种定位方式的简单介绍。下面是一些简单的案例。

(1)sticky定位——固定表格首行及首列

11.png

12.gif

注意:若父元素设置overflow:auto, 则需要设置宽度或高度,sticky才会有效果。

(2)absolute 裁剪图片

clip:rect(top, right, bottom, left)

剪裁矩形的上边缘距离原元素上边缘top像素;

剪裁矩形的右边缘距离原元素左边缘right像素;

剪裁矩形的下边缘距离原元素上边缘bottom像素;

剪裁矩形的左边缘距离原元素左边缘left像素。

13.png

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改