CSS盒子的定位＞（上篇）#定位属性#相对定位-附练习
一、定位属性
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>原文地址：https://blog.csdn.net/Tu_17/article/details/143723564
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！