CSS中定位的方式有哪些?position属性的值有哪些?他们之间的区别是什么?

🌙
手机阅读
本文目录结构

这个题目可能的问法有两种

  • CSS中定位的方式有哪些?
  • position属性的值有哪些?他们之间的区别是什么?

精简的答案

  • 默认值:initial(浏览器默认值)
  • 继承父级元素的定位机制:inherit
  • 默认:static
  • 相对定位:relative
  • 绝对定位:absolute(注意z-index
  • 固定定位:fixed
  • 粘性定位:sticky该定位基于用户滚动的位置。

详细解说

  • initial:设置该属性为浏览器默认值
  • inherit :规定应该从父元素继承 position 属性的值。
  • static :默认值。
    • 没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 
  • relative :生成相对定位的元素,相对于其正常位置进行定位。
    • 因此,“left:20” 会向元素的 LEFT 位置添加 20 像素。
  • absolute: 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
    • 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
  • fixed :生成绝对定位的元素,相对于浏览器窗口进行定位。
    • 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。fixed旧版本IE不支持
  • sticky
    • 粘性定位,该定位基于用户滚动的位置。(特定阈值指的是 top, right, bottom 或 left 之一)
      • 它的行为就像 position:relative; 而当页面滚动超出目标区域时,
      • 它的表现就像 position:fixed;,它会固定在目标位置。
      • 注意: Internet Explorer, Edge 15 及更早 IE 版本不支

更详细的介绍,请参考

CSS position

更多面试题

如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

面试题
HTML CSS JavaScript
jQuery Vue.js React
算法 HTTP Babel
BootStrap Electron Gulp
Node.js 前端经验相关 前端综合
Webpack 微信小程序 -

这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>