自我评价:走在路上的菜鸟,想着CMS|WEB|SEO,做着可以成为牛掰程序seoer的梦!

当前位置:博客 > 前端开发 > HTML|CSS代码 >

定位元素的异同点

作者:灰牛站长•发布时间:2021-07-12 11:25:09•浏览

定位的值

  1. position: absolute绝对定位
  2. position: relative相对定位
  3. position: fixed固定定位

定位的相同点和不同点

===相同点:

  1. 可以 设置top/ bottom/ left/right四个方位值,如果同时有top、 bottom,只有top起作用;如果同有1eft、 right,只有left起作用
  2. 都设置z-index改变层级而且z-index越大越在上

不同点: 是否脱离文档流:绝对定位:是/相对定位:否/固定定位:是=>只有相对定位没有脱离文档流,绝对和固定定位都会脱离文档流不占位

2.参照物

  1. 绝对定位:是具有定位元素的父级元素,如果直接父级没有定位元素,则会往上级 直到找到我们的根元素htm1为止;绝对定位元素一定要给他的直接父元素加相对参照物( position: relative)
  2. 相对定位:它自己本身
  3. 固定定位:整个浏览器窗口
上一篇:定位之固定定位 下一篇:z-index的特点

相关文章

  • 代码技巧之常用快捷键的整理

    代码技巧之常用快捷键的整理

    常用快捷键的整理 ctr1+C复制 ctr1+V粘贴 ctrl+Z撤销 回到上一步操作 ctr1+D复制整行 ctr1+Z剪切整行 增加/删除单行注释ctrl+/ 增加/删除多行注释ctrl+shift+/ html注释...
    2021-07-12 11.07.53
  • z-index的特点

    z-index的特点

    思路: ➥z-index的结构/定位元素默认的z-index ➥z-index单位 ➥能不能用子元素和父元素比较 ➥父元素没有z-index,能不能通过子元素控制他们的层级=改变层级...
    2021-07-12 11.07.57
  • 定位之固定定位

    定位之固定定位

    固定定位- position: fixed 脱离文档流; 参照物是浏览器的可视窗口;任何元素都可以设置固定定位; 可设置top/ bot tom/left/ right四个方位 可通过z-index改变层级 !...
    2021-07-12 11.07.38
  • 定位之绝对定位

    定位之绝对定位

    定位元素元素层级元素定位滚动条 绝对定位- position: absolute;特点 脱离文档流 可以设置参照物,参照物必须是其父级元素(直系父级),如果直接父级没有会一直...
    2021-07-12 11.07.13
  • clear的值和特点及伪元素before和after的使用

    clear的值和特点及伪元素before和after的使用

    clear:both的特点 元素需是块级元素 元素不能带有浮动属性 元素必须放在最后一个浮动元素的后面 用户是看不到这个元素的 clearfix清浮动方法的属性 浮动元...
    2021-07-12 11.07.45

手机端