CSS定位允许你控制元素在页面上的位置。CSS提供了多种定位方式，包括静态定位、相对定位、绝对定位和固定定位。
静态定位（Static Positioning）：这是元素的默认值，即如果你没有为元素指定定位属性，那么它就使用静态定位。静态定位的元素不受 top, bottom, left, right 这些属性的影响。
.static {
position: static;
}相对定位（Relative Positioning）元素相对于其正常位置进行定位。因此，"left:20px" 会向元素的左边添加 20 像素。
.relative {
position: relative;
left: 20px;
top: 30px;
}绝对定位（Absolute Positioning）：元素相对于最近的已定位父元素（即设置了 position 属性的父元素）进行定位。如果没有已定位的父元素，那么它会相对于初始包含块进行定位。
.absolute {
position: absolute;
top: 80px;
right: 0;
}固定定位（Fixed Positioning）：元素相对于浏览器窗口进行定位，即使页面滚动，它也始终会停留在同一的位置。
.fixed {
position: fixed;
bottom: 0;
right: 0;
}在使用定位时，需要注意以下几点：
- 当元素被设置为绝对定位或固定定位时，它会脱离正常的文档流，这意味着它不再占据空间，其他元素会填补其原本的位置。
- 相对定位的元素仍然保留在文档流中，只是相对于其正常位置移动。
- 当你使用 top, bottom, left, right 这些属性时，需要确保元素的定位属性（position）不是 static。
最后，定位属性经常与 z-index 属性一起使用，z-index 属性用于控制元素的堆叠顺序（哪个元素应该在前，哪个元素应该在后）。注意，z-index 只对定位元素（即 position 属性值为 relative, absolute, fixed 或 sticky 的元素）有效。
为什么需要定位
1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。
2.当我们滚动窗口的时候，盒子是固定屏幕某个位置的。
所以定位则是让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
定位的组成
定位：将盒子定在某一位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式。
边偏移则决定了该元素的最终位置。
定位模式
定位模式决定元素的定位方式，它通过CSS的position 属性来设置，其值分为四个：
| 值 | 语义 |
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
边偏移
边偏移就是定位的盒子移动到最终位置。有top bottom left rigth4个属性
| 边偏移属性 | 示例 | 描述 |
| top | top: 80px | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | bottom：80px | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | left： 80px | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | right： 80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
静态定位
静态定位是元素的默认定位方式，无定位的意思。
语法：
选择器 { position：static；}
静态定位按照标准流特性摆放位置，他没有偏移。
静态定位在布局中很少用到。
相对定位
相对定位是元素在移动的时候，是相对于它原来的位置来说的。
语法：
选择器 { position：relative；}
相对定位的特点：
1.它是相对于自己原来的位置移动的（移动位置的时候参照点是自己原来的位置）
2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置）
<style>
.box1 {
position: relative;
top: 50px;
left: 100px;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
</body>
定位前 定位后
绝对定位
绝对定位是元素在移动的时候，是相对于它父类元素来说的。
语法：
选择器 { position：absolute；}
绝对定位的特点：
1. 如果没有父类元素 或者 父类元素没有定位，则以浏览器为准定位。
2. 如果祖先元素有定位，则以最近一级的有定位祖先元素为参考点移动位置。
<style>
.son {
/* 子类盒子定位以父类为参考位置 */
position: absolute;
left: 100px;
bottom: 50px;
width: 200px;
height: 200px;
background-color: pink;
}
.father {
/* 父类盒子添加定位 */
position: relative;
left: 50px;
top: 100px;
width: 500px;
height: 500px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
3. 绝对定位不再占有原先的位置
绿色盒子添加绝对定位后（left）,蓝色的盒子就会自动跑上去。
<style>
.big {
position: relative;
left: 50px;
top: 50px;
width: 400px;
height: 400px;
background-color: pink;
}
.box1 {
position: absolute;
left: 200px;
width: 200px;
height: 200px;
background-color: yellowgreen;
}
.box2 {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="big">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>案例
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: skyblue;
}
.box {
width: 228px;
height: 270px;
background-color: white;
margin: 100px auto;
//子绝父相
position: relative;
}
.box>img {
width: 100%;
}
.box h4 {
font-family: MicrosoftYaHei;
font-size: 14px;
font-weight: normal;
height: 32px;
width: 184px;
margin-top: 25px;
margin-left: 24px;
}
.box p {
width: 121px;
height: 11px;
font-family: MicrosoftYaHei;
font-size: 12px;
font-weight: normal;
color: #999999;
margin-top: 20px;
margin-left: 22px;
}
.box p span {
color: #ff7c2d;
}
.box em img {
position: absolute;
top: 4px;
right: -4px;
}
</style>
</head>
<body>
<div class="box">
<em><img src="images/hot.png" alt=""></em>
<img src="images/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<p><span>高级</span> • 1125人在学习</p>
</div>
</body>
固定定位
固定定位是元素固定于浏览器可视区的位置。主要场景：可以在浏览器页面滚动时元素的位置不会变。
特点：以浏览器的可视化窗口为参照点移动元素。
固定到版心的右侧
<style>
.fix {
position: fixed;
/* 1.走浏览器宽度的一半 */
left: 50%;
/* 2.走版心的一半 */
margin-left: 400px;
width: 50px;
height: 150px;
background-color: skyblue;
}
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="fix"></div>
<div class="w"></div>
</body>
粘性定位 sticky
粘性定位（Sticky Positioning）是 CSS3 中新增的一种定位机制，通过 position: sticky; 属性来设置。这种定位方式可以被视为相对定位和固定定位的混合体。在滚动到某个位置之前，元素会表现得像相对定位元素一样，遵循正常的文档流。当页面滚动到元素的指定位置（通常是元素的顶部到达视口的顶部）时，元素会固定在视口内，表现得像固定定位元素一样，即使页面继续滚动，元素也会保持在固定的位置。
要使用粘性定位，通常需要配合 top、right、bottom 或 left 等属性来指定元素相对于视口边缘的偏移量。
<style>
body {
height: 3000px;
}
.nav {
/* 粘性定位 */
position: sticky;
top: 0;
width: 800px;
height: 50px;
background-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="nav">我是导航栏</div>
</body>
定位的叠放顺序
在CSS中，元素的定位叠放顺序可以通过多种属性来控制，其中z-index属性起到了关键作用。一般来说，元素的z-index值越高，它在页面上的叠放顺序就越靠前，即越有可能遮挡其他元素。但是，z-index只对定位元素（即position属性值不是static的元素）有效。
此外，元素的定位方式（position属性的值）也会影响其叠放顺序。根据CSS样式的层叠规则，从高到低依次是：
position属性值为fixed的元素position属性值为sticky的元素position属性值为absolute的元素position属性值为relative的元素position属性值为static的元素
除了定位方式，元素在HTML文档中的顺序也会影响其叠放顺序。对于相同定位方式和相同z-index值的元素，后出现的元素会覆盖先出现的元素。
因此，要确定元素的叠放顺序，需要综合考虑其z-index值、定位方式以及在HTML文档中的顺序。如果需要调整元素的叠放顺序，可以通过修改这些属性来实现。
<style>
.w {
position: absolute;
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
z-index: 1;
}
.box2 {
background-color: red;
left: 50px;
top: 50px;
}
.box3 {
background-color: green;
left: 80px;
top: 80px;
}
</style>
</head>
<body>
<div class="box1 w"></div>
<div class="box2 w"></div>
<div class="box3 w"></div>
</body>
数值可以是正整数，负数或者0，默认是auto，数值越大，盒子越靠上。
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有z-index属性
绝对定位的盒子居中算法
加了绝对定位的盒子不能通过margin：0 auto 水平居中。
<style>
.box {
position: absolute;
/* left走50% 父容器宽度的一半 */
left: 50%;
/* margin 负值 ，往左边走，走自己盒子宽度的一半 */
margin-left: -100px;
top: 50%;
margin-top: -100px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
定位的特殊特性
CSS中的定位具有一些特殊的特性，这些特性与元素的布局和显示方式密切相关。以下是关于CSS定位的一些特殊特性的概述：
- 绝对定位（absolute）：
- 绝对定位的元素会脱离标准流的控制，不会占据原来的位置。
- 如果绝对定位元素的父元素都没有使用定位，那么位置偏移基于浏览器（会随浏览器的滚动条滚动）。
- 如果绝对定位元素的父元素有使用定位，那么位置偏移基于离它最近使用定位的父元素位置偏移。
- 绝对定位的元素会完全压住盒子，包括盒子的内容（文本和图片）。
- 绝对定位的元素具有行内块的显示特点，不会默认继承父元素的宽度。
- 固定定位（fixed）：
- 固定定位的元素也会脱离标准流的控制，它的位置是相对于浏览器窗口固定的，即使页面滚动，它也会保持在同一位置。
- 固定定位的元素同样会完全压住盒子及其内容。
- 相对定位（relative）：
- 相对定位的元素是不脱标的，还会占据原来的位置。
- 相对定位的元素偏移永远基于自身的位置。
- 粘性定位（sticky）：
- 粘性定位是相对于用户的滚动位置来定位元素的，基本上可以理解为相对定位和固定定位的混合。在滚动到某个位置之前，元素会表现得像相对定位元素一样，遵循正常的文档流。当页面滚动到元素的指定位置时，元素会固定在视口内，表现得像固定定位元素一样。
- 层叠顺序（z-index）：
- 元素的层叠顺序可以通过
z-index属性来控制。z-index值越高的元素在堆叠顺序中越靠上，即越有可能遮挡其他元素。但需要注意的是，z-index只对定位元素（即position属性值不是static的元素）有效。
- 元素的层叠顺序可以通过
- 行内元素与块级元素的特性变化：
- 当行内元素添加绝对定位或固定定位时，可以直接设置宽度和高度。
- 块级元素添加绝对定位或固定定位时，如果不设置宽度和高度，默认大小是内容实际大小。
这些特殊特性使得CSS定位在网页布局和设计中具有极大的灵活性和实用性，可以根据需要实现各种复杂的布局效果。然而，在使用这些特性时，也需要注意它们之间的相互影响和约束条件，以确保布局的正确性和一致性。
定位的拓展
浮动元素，只会压住下边标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）；
但是绝对定位（固定定位）会压住下面标准流所有的内容。
<style>
.box {
/* float: left; */
/* 浮动元素不会压住下面标准流盒子里面的文字（图片） */
position: absolute;
/* 绝对定位（固定定位）会压住下面标准流所有的内容 */
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<p>床前明月光，疑是地上霜。举头望明月，低头思故乡。</p>
</body>
综合案例
<style>
* {
margin: 0;
padding: 0;
}
.tb-promo {
width: 580px;
height: 252px;
margin: 100px auto;
position: relative;
}
.tb-promo img {
width: 100%;
}
.prev {
display: block;
width: 20px;
height: 30px;
position: absolute;
/* 盒子高度的一半 */
top: 50%;
left: 0;
/* 自身的一半 */
margin-top: -15px;
}
.next {
display: block;
width: 20px;
height: 30px;
position: absolute;
top: 50%;
right: 0;
margin-top: -15px;
}
.promo-nav {
height: 13px;
width: 70px;
background-color: rgba(255, 255, 255, 0.3);
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -35px;
border-radius: 7px;
}
.promo-nav li {
list-style: none;
width: 8px;
height: 8px;
background-color: white;
float: left;
margin: 3px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="tb-promo">
<img src="images/taobao.webp" alt="">
<!-- 左侧按钮 -->
<a href="#" class="prev"><img src="images/左箭头.png" alt=""></a>
<!-- 右侧按钮 -->
<a href="#" class="next"><img src="images/右箭头 .png" alt=""></a>
<!-- 小圆点 -->
<ul class="promo-nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
总结
1.标准流，可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局。
2.浮动，可以让多个块级元素-行显示或者 左右对齐盒子,多个块级盒子水平显示就用浮动布局。
3.定位，定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。
2254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
