CSS定位 相对定位 绝对定位 固定定位

鳄鱼君

发表文章数:643

热门标签

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS » CSS定位 相对定位 绝对定位 固定定位

相对定位

元素在移动位置的时候,相对于它原来的位置,语法:position:relative;
相对定位特点
相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
原来在标准流的位置继续占有,后面的盒子仍以标准流的方式(不脱标,继续保留原来的位置)

绝对定位

元素在移动位置的时候,相对于它的祖先元素来说的,语法position:absolute;
绝对定位特点

  1. 如果没有祖先元素或者祖先元素没有定位,则以浏览器为基准定位
  2. 如果祖先元素有定位(相对、绝对、固定),则以最近一级的有定位的祖先元素为参考点移动位置
  3. 绝对定位不再占有原先的位置(脱标)

定位最常用的方式:子级是绝对定位,父级用相对定位
解释:

  1. 子级使用绝对定位,不占有位置,可以放到父盒子里卖弄的任何一个地方,不会影响其它的兄弟盒子
  2. 父盒子需要使用定位限制子盒子在父盒子内显示

固定定位

元素固定于浏览器可视区的位置,可以在浏览器页面滚动的时候元素的位置不会发生改变,语法:position:fixed;
固定定位特点

  1. 以浏览器的可视窗口为参照点移动
  2. 跟父元素没有任何关系
  3. 不随滚动条滚动
  4. 固定定位不再占有原先的位置(脱标)
标签:

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《CSS定位 相对定位 绝对定位 固定定位》 发布于2020-08-09

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

8 + 6 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册