CSS入门五、定位

h270626

于 2024-06-13 00:18:31 发布

阅读量262

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/h270626/article/details/139639649

版权

CSS入门五、定位
1、为什么需要定位
某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。

当我们滚动窗口的时候，盒子是固定屏幕某个位置的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UufJXA5O-1673421752068)(http://cdn.bluecusliyou.com/202212301728027.png)]

以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。

浮动和定位区别：

浮动：可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。

定位：可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
2、定位组成
定位将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移。
（1）定位模式
定位模式决定元素的定位方式，它通过 position 属性来设置，其值可以分为四个：

（2）边偏移
边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

3、静态定位 static（了解）
静态定位是元素的默认定位方式，无定位的意思。
静态定位按照标准流特性摆放位置，它没有边偏移。
静态定位在布局时很少用到。
选择器 { position: static; }
1
4、相对定位 relative（重要）
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。
相对定位的特点：（务必记住）
移动位置的时候参照点是自己原来的位置。
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。
选择器 { position: relative; }
1
案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>相对定位</title>
<style>
.box1 {
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 200px;
height: 200px;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="box1">