当前位置： 首页 > Web前端 > HTML

css定位五种方式

时间：2023-04-02 16:37:35 HTML

position我在学习别人资料的基础上整理自己的笔记，巩固css中五种定位方式的知识点，温故知新，在工作中不断完善自己.position属性的五个取值：staticrelativefixedabsolutesticky（粘性定位）正下方图片和代码示例：statichtml中所有元素的position默认值为static，static会遵循html排版的流程。静态不会对顶部、左侧、右侧和底部设置生效。比如我在静态div上面放一个高度为120px的div，静态属性div就会被压下去。

.static{position:static;宽度：360px；高度:360px;}.height{宽度:750px;height:120px;}absolute绝对定位，元素会由离它最近的父容器定位，父容器position的值必须是：relative,absolute,fixed，如果没有这样的父元素，那么元素就会相对于身体定位。绝对定位偏移值由其上、下、左、右值决定。如果一个绝对定位的元素超出了它的父元素的边界，如果你想隐藏溢出的部分，你想隐藏在哪个父类中，父类必须同时将position设置为relative/absolute/fixed其中之一时间，溢出需要设置为隐藏。请参阅以下示例：
/div>。高度{宽度：750px;高度：120px;}.absolute{位置：绝对;宽度：240px；高度：240px；右：80px；bottom:60px}从上图可以看出，绝对定位不会受到height元素布局的影响。我们正在复制更多的高度元素以使滚动轴出现在页面上。这时候我们会发现absolute元素会随着滚动轴滚动。另外，如下图，如果我们将absolute元素嵌套到absolute元素中，那么最里面的div会根据父层absolute元素的位置来定位。它只是确认上面提到的元素将被其最近的父容器定位。父容器position的取值必须是：relative、absolute、fixed。如果没有这样的父元素，该元素将相对于body定位。relativerelative与static非常相似，它会遵循html的排版流程，但是比static多了top、left、right、bottom的设置。也就是说除了按照html的排版流程进行定位之外，还通过top、left、right、bottom来调整自己的位置。下面的例子：.height{width:750px;高度：120px;}.relative{位置：相对;宽度:360px;身高:360px;顶部：60px；left:150px;}从上图一目了然，相对元素按照height布局浮动，按照top和left定位。添加一个div，相对元素向下移动。relative最重要的作用就是他里面的子元素，if如果定位方式是绝对的，那么子元素会按照相对位置来定位。.height{宽度：750px;高度：120px;}.relative{位置：相对;宽度：360px；身高:360px;顶部：60px；左：150px;}.absolute{位置：绝对;;高度：240px；右：80px；bottom:60px;}从这张图我们会发现，absolute子元素的right和bottom是根据relative元素的位置来定位的。这在日常项目中很常见。而如果你把相对元素换成static，你会发现绝对元素完全忽略了静态元素。.height{宽度：750px;高度:120px;}.static{位置:static;宽度：360px；height:360px;}.absolute{位置:absolute;宽度：240px；高度：240px；;bottom:60px;}fixedfixed和absolute很像，有两点不同：fixed会定位在屏幕上的固定位置，所以即使页面滚动，fixed也会一直停留在那个位置。如果fixed元素设置了top、left、right、bottom属性，那么即使放在relative中，fixed也会根据页面即body来定位，而不是relative元素。.height{width:750px;高度：120px;}.fixed{位置：固定;宽度：240px；高度：240px；左：80px；bottom:60px;}先看下图，我们把fixed元素嵌套到relative元素中，不设置top、left、right、bottom属性。此时固定元素会根据父元素相对排版.height{width:750px;height:120px;}.relative{位置：相对;宽度：360px；身高:360像素；顶部：60px；left:150px;}fixed元素一旦设置了top,left,right,bottom属性，即使放在relative中，fixed也会根据页面即body进行定位，而不是根据Relative元素定位sticky（粘性定位）sticky是css定位的新属性；可以说是relative定位relative和fixed定位fixed的结合；主要用于滚动事件的监听，简单来说就是在滑动过程中，当一个元素与其父元素的距离达到sticky的粘性定位要求时；position:sticky此时的作用是相对于fixed定位的，固定到如图所示的合适位置，我们添加更多的height元素，直到出现scroll轴。.height{width:750px;高度：120px;}.sticky{位置：sticky;宽度：240px；高度：90px；top:0;}当我们向上滑动滚动轴页面时，当粘性元素触及到页面顶部时，就会固定在顶部。固定到顶部的原因是我们将他的顶部设置为0。所以当顶部距离顶部0px时它会触发。如下图：sticky粘性定位可以用更少的代码实现弹性固定的场景，比如导航栏。但是在兼容性方面，因为是css的新属性，还是比较差的。我们可以参考下面的浏览器兼容性图表发现，从2014年开始，浏览器也慢慢支持了css中的五种定位方式。最后，非常感谢B站Codingstartup的Steven学习视频，根据他的视频和资料结合自己对笔记的理解，在工作中不断巩固和提高自己。

css定位五种方式相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。