【CSS定位属性】用CSS定位属性精确控制你的网页布局!

YunDuanCode · · 179 次点击 · · 开始浏览    

CSS定位属性是用于控制网页中元素位置的一种方式,它能够让元素在页面上精准地落在我们想要的位置。 在CSS中,定位(Positioning)是控制元素在页面上如何定位和显示的一种机制。它主要包括四种属性:静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)。 每种定位方式都有其独特的特点和使用场景,下面将分别介绍这几种定位属性。 ## 一、Static(静态定位) 静态定位是元素的默认定位方式,元素按照正常的文档流进行排列。在静态定位状态下,不能配合top、bottom、left、right来改变元素的位置。 - 可以用于取消元素之前的定位设置。 代码示例: ``` <!DOCTYPE html> <html> <head> <style> .static { background-color: lightblue; padding: 100px; } </style> </head> <body> <div>这是一个静态定位的元素。</div> </body> </html> ``` ![image.png](https://static.golangjob.cn/240330/5881cb4f44a31fe8ee6c497cfefabc67.png) ## 二、Fixed(固定定位) 固定定位使元素相对于浏览器窗口进行定位,即使页面滚动,元素也会保持在固定的位置。 - 固定定位的元素会脱离正常的文档流。 示例代码: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } body{ /* 给整个页面设置高度,出滚动条以便观察 */ height: 5000px; } div{ width: 100px; height: 100px; background-color: blue; /* 固定定位 */ position: fixed; right: 100px; bottom: 100px; } </style> </head> <body> <div></div> </body> </html> ``` 运行结果: 移动前 ![image.png](https://static.golangjob.cn/240330/d644efdb21d1fb3220c10a1921a74b20.png) 移动后 ![image.png](https://static.golangjob.cn/240330/afd834ad6966cf27645c8d046d5e8aed.png) 比如我们经常看到的网页右下角显示的“返回到顶部”,就可以用固定定位来实现。 ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { position: relative; } .content { /* 页面内容样式 */ } #backToTop { position: fixed; bottom: 20px; right: 20px; background-color: #333; color: #fff; border: none; padding: 10px; cursor: pointer; } </style> </head> <body style="height: 5000px;"> <div> </div> <button id="backToTop" onclick="scrollToTop()">返回顶部</button> <script> function scrollToTop() { window.scrollTo({top: 0, behavior: 'smooth'}); } </script> </body> </html> ``` 运行结果: ![image.png](https://static.golangjob.cn/240330/ed6a40924688b6080d3d5e10e56691bb.png) ## 三、Relative(相对定位) 相对定位是将元素对于它在标准流中的位置进行定位,通过设置边移属性top、bottom、left、right,使指定元素相对于其正常位置进行偏移。如果没有定位偏移量,对元素本身没有任何影响。 - 不使元素脱离文档流,空间会保留,不影响其他布局。 代码示例: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width:200px; height:100px; background:skyblue; margin:10px; } .box2{ width:200px; height:100px; background:pink; margin:10px; position:relative;/*相对定位*/ left:100px;/*向右偏移100px*/ top:-50px;/*向上偏移50px*/ } .box3{ width:200px; height:100px; background:yellowgreen; margin:10px; } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> </body> </html> ``` 运行结果: 没使用相对定位之前是这样的: ![image.png](https://static.golangjob.cn/240330/33c0248cf1d0a9095ffcc6dbd2612ed8.png) 使用相对定位后:相对于原来的位置向右偏移了100px,向上偏移50px。 ![image.png](https://static.golangjob.cn/240330/633ee1160b64b04fe89f700b0154e02b.png) 虽然它的位置发生了变化,但它在标准文档流中的原位置依然保留。 ## 四、Absolute(绝对定位) 绝对定位使元素相对于最近的非 static 定位祖先元素进行定位。如果没有这样的元素,则相对于初始包含块(initial containing block)。绝对定位的元素会脱离正常的文档流。 - 如果该元素为内联元素,则会变成块级元素,可直接设置其宽和高的值(让内联具备快特性); - 如果该元素为块级元素,使其宽度根据内容决定。(让块具备内联的特性) ``` <style> .wrap{ width:500px; height:400px; border: 2px solid red; } .box1{ width:200px; height:100px; background:skyblue; margin:10px; } .box2{ width:200px; height:100px; background:pink; margin:10px; position:absolute;/*绝对定位*/ left:100px;/*向右偏移100px*/ top:30px;/*向下偏移30px*/ } .box3{ width:200px; height:100px; background:yellowgreen; margin:10px; } </style> <div> <div>1</div> <div>2</div> <div>3</div> </div> ``` 图片将第二个设置为绝对定位后,它脱离了文档流可以定位到页面的任何地方,在标准文档流中的原有位置会空出来,所以第三个会排到第一个下面。 ![image.png](https://static.golangjob.cn/240330/3407d47ecac3a117a7b18b517f4a0e31.png) 第二个相对于它的父元素向右偏移100,向下偏移30。 >想要快速入门前端开发吗?推荐一个前端开发基础课程,这个老师讲的特别好,零基础学习无压力,知识点结合代码,边学边练,可以免费试看试学,还有各种辅助工具和资料,非常适合新手![点这里前往学习哦!](https://www.ydcode.cn/?sourceId=909) ## 五、z-index(层级顺序的改变) 层叠顺序决定了元素之间的堆叠顺序。z-index 属性用于设置元素的层叠顺序。具有较高 z-index 值的元素会覆盖具有较低 z-index 值的元素。 注意: - 默认值是0 - 数值越大层越靠上 - 不带单位 - 没有最大值和最小值 - 可以给负数 代码示例: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div:nth-of-type(1){ width: 300px; height: 300px; background-color: skyblue; position: absolute; } div:nth-of-type(2){ width: 200px; height: 200px; background-color: pink; position: absolute; } div:nth-of-type(3){ width: 100px; height: 100px; background-color: yellowgreen; position: absolute; z-index: -1; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html> ``` 运行结果: ![image.png](https://static.golangjob.cn/240330/6672c4ec7bc9537195f894dd4246f1ca.png) 可以看到,最后一个div依然存在,但是看不见了,原因就是我们改变了z-index属性值。 ![image.png](https://static.golangjob.cn/240330/4483f43561bb8aa536c8e6e020e66685.png) 以上就是CSS定位属性的介绍了,通过这些定位属性,可以灵活地控制网页中元素的位置和堆叠顺序。 在实际应用中,CSS定位属性的使用需要考虑到整体布局和用户体验。合理运用这些定位技巧,可以让你的网页不仅美观,而且易于使用和维护。记住,好的设计总是细节和功能的完美结合。

有疑问加站长微信联系(非本文作者))

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

179 次点击  
加入收藏 微博
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传