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)]
## 五、固定定位