CSS盒子的定位＞（上篇）#定位属性#相对定位-附练习

embedded/2024/11/17 21:44:49/

htmledit_views">

一、定位属性

1.定位方式

position属性可以选择4种不同类型的定位方式。

语法格式：position：relation | absolute | fixed
参数：①relative生成相对定位的元素，相对于其正常位置进行定位。
②absolute生成绝对定位的元素，元素的位置通过 left、top、right 和 bottom属性进行规定。
③fixed生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过left、top、right以及 bottom 属性进行规定。
‼注：①两个方向各选一个参数即可定位；②定位的数值可以为负数。

二、相对定位

使用相对定位的盒子会相对于自身原本的位置，通过偏移指定的距离，到达新的位置。

html">position: relative;

除了要将position属性值设置为relative外，还需要一定的偏移值。

示例：

①首先创建一个HTML默认结构

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属性

html">    <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>

运行的结果为：（由左➡右）

由以上的示例我们可以看到，使用相对定位的盒子仍在文档流中，占据原本位置，它对父容器没有影响。

🛑练习

如图：

代码如下：

html">    <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>