请选择 进入手机版 | 继续访问电脑版

关于定位

[复制链接]
轩峰毅飞 发表于 2021-1-1 18:35:23 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
关于定位

emmm,怎么开头那。。。好纠结。
这是一个关于定位的总结,恩,就是那种网上一搜一大片的那种,加上了一些我自己的话。
定位测试的代码

  1.             定位            body {            height: 5000px;        }                div {            width: 100px;            height: 100px;            border: 1px solid black;        }                .box {            width: 400px;            height: 2000px;        }                .box1 {            background-color: red;            position: relative;            top: -20px;            left: -10px;            z-index: -1;        }                .box2 {            background-color: green;            position: absolute;            top: 100px;            left: 100px;        }                .box3 {            background-color: blue;            position: fixed;            top: 200px;            left: 200px;        }                .box4 {            background-color: black;            color: white;            position: sticky;            top: 0px;            left: 300px;        }                参照盒子,不设置定位
  2.         相对定位:不脱离文档流,相对于自身定位
  3.         绝对定位:脱离文档流,相对于离自身最近的定位的祖先元素定位,会一直向上查找,直到body
  4.         固定定位:脱离文档流,相对窗口定位
  5.         黏性定位:常态时不脱离文档流,当卷动到屏幕外时,脱离文档流
  6.    
复制代码
定位的语法(搬运)

static: 对象遵循通例流。此时4个定位偏移属性不会被应用。
relative: 对象遵循通例流,并且参照自身在通例流中的位置通过top,right,bottom,left这4个定位偏移属性举行偏移时不会影响通例流中的任何元素。
absolute: 对象脱离通例流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响通例流中的任何元素,其margin不与其他任何margin折叠。
fixed: 与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。
sticky: 对象在常态时遵循通例流。它就像是relative和fixed的合体,当在屏幕中时按通例流排版,当卷动到屏幕外时则体现如fixed。该属性的体现是现实中你见到的吸附效果。(CSS3)
自己的想法

关于我自己的想法,可能对可能不对,仅供参考。
static:默认值。就是你没有给position取别的的值就都是这个,他什么都不会发生,自身应该是什么样就照旧什么样。
relative:相对定位,对象遵循通例流。就是相对于自身举行定位,top,right,bottom,left四个属性的取值可为正也可为负,
值得注意的是,比方top:10px; 是相对于自身本来的位置向下移动10px。。。就是可以明确为定位后的位置头顶间隔原来的位置有10px的间隔(怎么感觉越表明越不清楚了)
ps又ps:relative没有脱离文档流,但是它不会影响其他元素自身的位置,固然他会遮盖文档流中的寻常元素,也可以通过z-index: ;来调治以0为界限。尚有一件事,怎么说那,relative移动后现在的位置不会影响到其他的元素,但是他移动前的位置还在,就是我人虽不在那边了,但照旧那边照旧我的土地,其他人不能用,飘在头顶我管不着,但是你不能站上来(大概)。
ps又ps又px:除了定位外,relative通常还用来界说 absolute的参照物。恩,到absolute再说。
absolute:绝对定位,对象脱离文档流,简朴来说,就是正常的文档里是一个桌面,而脱离文档流,则是飘在了桌面的上面,你能瞥见,但是对于桌面来说,它自己的位置上并没与东西,参考浮动。绝对定位的偏移属性是相对于间隔自身位置最近的设置了定位的祖先元素,找不到的话,会回溯到body为止。就是刚刚说的可以设置relative来给absolute一个参照物。
ps:暂时没有ps,占个位置,有了再写。
fixed:固定定位,对象脱离文档流,相对于窗口定位。许多网页上那些两侧的广告,下方的锚点,就是岂论你怎么上下拉动滚动条,他都在窗口的同一位置的,多数可以用fixed实现。fixed是相对于欣赏器窗口定位的,通过定位偏移属性订到哪里,他就在那边不会动了。
sticky:黏性定位,对象在常态时遵循通例流。emmm,这个属性怎么说那,简朴来说就是你在没有触发他的时候,他是在通例文档流中的,出发后,他相当于fixed,脱离文档流,定在相对于窗口(父元素?)的某个位置(官方文档说是触发后相当于fixed,那应该就是相对于窗口,但是有些问题,背面会表明),然后固定在那边。
ps:但是黏性定位有个问题,就是定位的子元素是不能脱离父元素的,如果你的父元素高度只有100px 那当他脱离文档流后也出不去父元素的框(你是爸爸的崽,飘在天上也逃不出我的手掌心),可能这么说有点抽象,贴个代码吧。
  1.             关于黏性定位能不能脱离爸爸的度量的问题            body {            height: 5000px;        }                .dad {            width: 300px;            height: 300px;            border: 1px solid black;        }                .son {            width: 100px;            height: 100px;            background-color: red;            position: sticky;            top: 0px;            left: 400px;        }               
  2.    
复制代码

可以看到父框的宽度为300px;黏性定位的left为400px;但是他还被父框拦在了怀里,

向下也是一样,他并不能脱离bad的度量,所以当你的页面布局复杂的时候,黏性定位的使用要慎重一点,它可能做不到你让他做的事情,不是它不愿意,而是它的爸爸不允许(大雾)。
写在最后的话

虽然很可能这篇博客的访问量都是我一个人创造的,但是姑且照旧说一下,如果你看到了了这篇博客,并且看到了这里,并且和我一样也是一个正在学习前端的萌新的话,在实际应用这些东西之前,请按照自己的明确实验一下效果,实际看看这些东西到底是什么,如果我有什么写的不对的,也欢迎返来喷我,放开喷,没事,但是要带着干货。竣事。

来源:https://blog.csdn.net/m0_54067601/article/details/111941221
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )