admin管理员组

文章数量:1611208

position 定位

position的值包括 relative（相对定位）、 absolute（绝对定位）、fixed（固定位置）、 static 等

一、相对定位：

relative（相对定位）
如果对一个元素进行相对定位，它将出现在它所在的位置上，通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。默认相对值是body。注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。检查元素看body可知。
个人理解：这个相对是相对的元素本身，之所以设置是使得left，top等能起作用，并且使用relative仍然
占据原来的空间，即从元素本来所存在的位置到元素移动的位置，那很多行里面都不会有其他的元素与他并列，即它所在的行不能再出现其他元素。

相对于自身进行定位
 1>不设置偏移量的时候 对元素没有任何影响，设置了偏移量，则基于自身初始的位置进行偏移

 2>可以提升层级关系
二、绝对定位：

absolute（绝对定位）
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
个人理解：元素位置相对于最近的已定位祖先元素， 如果元素没有已定位的祖先元素，它的位置相对于最初的包含块。祖先元素：即是看与元素最近的div盒子是否使用相对定位或绝对定位。脱离文档流：如果有新的元素出现并且在同一个地方（如果是相对定位则根本不可能出现覆盖），则会出现覆盖的情况，可以用z-index控制覆盖的顺序。

1>在没有父级元素定位时，以浏览器的左上角为基准
2>有父级的情况下，父级设置相对定位，子级设置绝对定位 
是以父盒子进行定位的实际项目开发当中，这种“父相子绝”的样式手法经常用到。-----父相对，子绝对
三、固定定位

fixed（固定位置）
定位在浏览器的某个位置，可以随着网址的滑动而固定住

本文标签： 位置RelativePositionabsolutestatic

版权声明：本文标题：position定位 relative（相对定位）、 absolute（绝对定位）、fixed（固定位置）、 static 等 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1728605388a1165382.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。