CSS定位详解
一、概念
1、概念： CSS中的定位概念是指通过设置元素的定位属性（position）来控制元素在页面中的位置。
2、基本思想：定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
通过合理运用这些定位属性，可以实现各种复杂的布局效果，使页面元素按照设计要求精准地定位和排列 。
二、定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
三、相对定位
1、概念： 相对于原有的位置发生改变，并且保留原有的空间位置 。
2、特点：
- 元素仍然占据文档流中的空间，不会影响其他元素的位置。
- 相对定位的元素在移动时会影响周围元素的位置，但不会脱离文档流。
- 可以与绝对定位结合使用，实现更复杂的布局效果。
3、基本步骤：
-
设置元素的
position属性为relative;。.example { position: relative; } -
使用
top、right、bottom、left属性来调整元素的位置。这些属性值可以是负值，用来控制元素相对于原始位置的偏移量。.example { position: relative; top: 10px; left: 20px; }
4、代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#manager{
border: orange 1px solid;
margin-top: 200px;
}
#box01{
width: 100px;
height: 100px;
border: red 1px solid;
}
#box02{
width: 100px;
height: 100px;
border: blue 1px solid;
position: relative;/*相对定位：保留原有位置，相对于原有位置进行位移*/
top: 50px;/*距离定位位置上边缘50px*/
left: 50px;/*距离定位位置左边缘50px*/
}
#box03{
width: 100px;
height: 100px;
border: green 1px solid;
}
</style>
</head>
<body>
<div id="manager">
<div id="box01"></div>
<div id="box02"></div>
<div id="box03"></div>
</div>
</body>
</html>
代码效果：
四、绝对定位
1、概念： 通过设置元素的position: absolute;属性来相对于最近的已定位祖先元素（父元素或更高级别的祖先元素）进行定位。如果没有已定位的祖先元素，则相对于最初的包含块（一般为浏览器窗口）进行定位。绝对定位的元素不再占据文档流中的空间，可以自由定位在页面中的任意位置。
理解：绝对定位相对于他有position属性的父级元素进行定位，如果父级元素没有postion定位，那么就找父级的父级，直到向上找到position定位为止，如果他向上找不到position定位，那么就以最外层的body进行定位。
并且绝对定位不会保留原有的位置空间。
z-index属性，确定层级大小，用来设定哪一个盒子在上面，越大越在上面
2、特点：
- 元素脱离文档流，不再占据原始位置，不会影响其他元素的位置。
- 绝对定位的元素会相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于最初的包含块（一般为浏览器窗口）进行定位。
- 绝对定位的元素在移动时不会影响周围元素的位置。
3、基本步骤：
-
设置元素的
position属性为absolute;。.example { position: absolute; } -
使用
top、right、bottom、left属性来指定元素相对于其包含块（已定位的祖先元素或浏览器窗口）的偏移位置。.example { position: absolute; top: 50px; left: 20px; }
4、示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#manager{
border: orange 1px solid;
margin-top: 200px;
position: relative;
}
#box01{
width: 100px;
height: 100px;
border: red 1px solid;
}
#box02{
width: 100px;
height: 100px;
border: green 1px solid;
position: absolute;
top: 50px;/*距离定位位置上边缘50px*/
left: 50px;/*距离定位位置左边缘50px*/
}
#box03{
width: 100px;
height: 100px;
border: blue 1px solid;
}
</style>
</head>
<body>
<div id="manager">
<div id="box01"></div>
<div id="box02"></div>
<div id="box03"></div>
</div>
</body>
</html>
代码效果：
<div id="manager">
<div id="box01"></div>
<div id="box02"></div>
<div id="box03"></div>
</div>
</body>
**代码效果**：[外链图片转存中...(img-UaETpH18-1715951930810)]
## 五、固定定位
314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
