CSS定位详解
- 软件开发
- 2025-09-17 00:42:01
1. 相对定位 1.1 如何设置相对定位？ 给元素设置 position:relative 即可实现相对定位。 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。 1.2 相对定位的参考点在哪里？ 相对自己原来的位置 1.3 相对定位的特点： 1. 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。 2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。 默认规则是： 定位的元素会盖在普通元素之上。都发生定位的两个元素，后写的元素会盖在先写的元素之上。 3. left 不能和 right 一起设置， top 和 bottom 不能一起设置。 4. 相对定位的元素，也能继续浮动，但不推荐这样做。 5. 相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>01_相对定位</title> <style> .outer{ width: 500px; background-color: aquamarine; border: 1px solid black; padding: 20px; } .box{ width: 100px; height: 100px; font-size: 20px; } .box1 { background-color: red; } .box2 { background-color: green; position: relative; left: 10px; } .box3 { background-color: hotpink; } </style> </head> <body> <div class="outer"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> </div> </body> </html>
注意：绝大多数情况下，相对定位，会与绝对定位配合使用。
2. 绝对定位 2.1 如何设置绝对定位？ 给元素设置 position: absolute 即可实现绝对定位。 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。 绝对定位的参考点是参考它的 包含块 。 什么是包含块？ 1. 对于没有脱离文档流的元素：包含块就是父元素； 2. 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都 没定位，那包含块就是整个页面）口诀：子绝父相(子元素开启绝对定位，父元素就要开启相对定位)
鼠标浮动在父元素上，盒子2向右移动200px
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02_绝对定位</title> <style> .outer { width: 500px; background-color: aquamarine; border: 1px solid black; padding: 20px; position: relative; } .box { width: 100px; height: 100px; font-size: 20px; } .box1 { background-color: red; } .box2 { background-color: green; /* 给2开启了绝对定位，他就脱离了文档流 3就占领了2的位置 */ position: absolute; } .box3 { background-color: hotpink; } .outer:hover .box2{ right: 200px; } </style> </head> <body> <div class="outer"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> </div> </body> </html>
