dw如何用position定位案例
以下是一个使用position属性进行定位的案例：
HTML代码：
```
<div id="container">
  <div id="box1">Box 1</div>
  <div id="box2">Box 2</div>
  <div id="box3">Box 3</div>
</div>
```
CSS代码：
```
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background-color: lightgray;
}
css中的position属性#box1 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: red;
}
#box2 {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50px;
  right: 50px;
  background-color: green;
}
#box3 {
  width: 300px;
  height: 300px;
  position: absolute;
  bottom: 20px;
  left: 50px;
  background-color: blue;
}
```
在这个案例中，我们使用了position属性来定位三个盒子（box1、box2和box3）在父容器（container）内的位置。
- box1使用了绝对定位（position: absolute）并指定了top和left属性来距离父容器左上角20px的位置。
- box2同样使用了绝对定位，并指定了top和right属性来距离父容器右上角50px的位置。
- box3也使用了绝对定位，并指定了bottom和left属性来距离父容器左下角20px的位置。
这样，三个盒子会根据其位置属性在父容器内定位，从而实现了在容器中的自由定位效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。