关键词搜索

源码搜索 ×
×

CSS定位

发布2019-12-02浏览564次

详情内容

CSS定位,谁不知道,position咯。
position:relative,相对定位;
position:absolute,绝对定位,谁人不知?

惭愧,我还真不知。一直以来,我都认为absolute是相对于屏幕的位置的定位,其实不是,absolute仍然是一种相对定位,相对于父元素的定位。fixed才是一般意义上的绝对定位(但其实也是相对定位,只不过是相对于视口ViewPort罢了)。

position对应多个选项,下面是摘要:

static

默认,正常的页面流里面,每个块级元素占据自己的区块(block),元素与元素之间不产生重叠,这个位置就是元素的默认位置。

relative

相对于默认位置(即static时的位置)进行偏移,即定位基点是元素的默认位置。它必须搭配top、bottom、left、right这四个属性使用(2个就够),用来指定偏移的方向和距离。
在这里插入图片描述

position

相对于上级元素(一般是父元素)进行偏移,即定位基点是父元素。也必须搭配top、bottom、left、right这四个属性一起使用。

它有一个重要的限制条件:定位基点(一般是父元素)不能是static定位,否则定位基点就会变成整个网页的根元素html。

在这里插入图片描述

fixed

相对于视口(viewport,浏览器窗口)进行偏移,即定位基点是浏览器窗口。

sticky

页面未达到滚动时,相当于relative;页面滚动时,则固定在某一位置,不随页面滚动。
可以用来固定某区域,如页头、表头等等。

阮一峰:CSS 定位详解

相关技术文章

点击QQ咨询
开通会员
返回顶部
×
微信扫码支付
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载