一、定位属性
1.定位方式
position属性可以选择4种不同类型的定位方式。
- 语法格式：position：relation | absolute | fixed
- 参数：①relative生成相对定位的元素，相对于其正常位置进行定位。
②absolute生成绝对定位的元素，元素的位置通过 left、top、right 和 bottom属性进行规定。
③fixed生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过left、top、right以及 bottom 属性进行规定。 - ‼注：①两个方向各选一个参数即可定位；②定位的数值可以为负数。
二、相对定位
使用相对定位的盒子会相对于自身原本的位置，通过偏移指定的距离，到达新的位置。
position: relative;除了要将position属性值设置为relative外，还需要一定的偏移值。
示例：
- ①首先创建一个HTML默认结构
<style>div{width: 100px;height: 100px;background-color: gray;border: 2px red solid;margin: 3px;}#div1{background-color: red;}#div2{background-color: green;}#div3{background-color: blue;}</style>
</head>
<body><div id="div1">红</div><div id="div2">绿</div><div id="div3">蓝</div>
</body>- ②添加带有相对定位方式的CSS属性
<style>div{width: 100px;height: 100px;background-color: gray;border: 2px red solid;margin: 3px;}#div1{background-color: red;position: relative;left: 50px;top: 50px;}#div2{background-color: green;position: relative;left: 50px;top: 50px;}#div3{background-color: blue;}</style>
</head>
<body><div id="div1">红</div><div id="div2">绿</div><div id="div3">蓝</div>
</body>运行的结果为：（由左➡右）
由以上的示例我们可以看到，使用相对定位的盒子仍在文档流中，占据原本位置，它对父容器没有影响。
🛑练习
如图：
代码如下：
<style>#div1{width: 100px;height: 100px;background-color: gray;border: 10px red solid;}#div2{width: 100px;height: 100px;background-color: gray;border: 10px green solid;position: relative;left: 50px;top: 50px;}#div3{width: 100px;height: 100px;background-color: gray;border: 10px blue solid;position: relative;left: -5px;}#div4{width: 100px;height: 100px;background-color: gray;}#div5{width: 100px;height: 100px;background-color: gray;}#div6{width: 100px;height: 100px;background-color: gray;}#div{width: 100px;height: 100px;background-color: white;border: 10px yellow solid;}#div11{width: 100px;height: 100px;background-color: white;border: 10px yellow solid;}#div22{width: 100px;height: 100px;background-color: white;border: 10px yellow solid;}</style>
</head>
<body><img src="../../1.HTML/咖啡.jpg" id="div1"><img src="../../1.HTML/咖啡.jpg" id="div2"><img src="../../1.HTML/咖啡.jpg" id="div3"><br><img src="../../1.HTML/咖啡.jpg" id="div4"><img src="../../1.HTML/咖啡.jpg" id="div5"><img src="../../1.HTML/咖啡.jpg" id="div6"><div id="div"></div><div id="div11"></div><div id="div22"></div>
</body>
)
