CSS盒子的定位＞ （中篇）#绝对定位#附练习
一、绝对定位
1.概念：
相对于已经定位的上层元素（即使用了position）进行定位；若上层元素没有定位，则向更上层寻找已定位元素，直至根元素。（脱离文档流）
2.代码属性：
CSS代码添加
position：absolut水平方向：left、right
垂直方向：top、bottom
3.‼注：
①两个方向各选一个参数即可定位。
②定位的数值可以为负数。
③设置了绝对定位的盒子，都有专属浮层，由几个绝对定位的盒子，就有几个浮层。
4.示例
- ①首先创建一个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: absolute;
left: 50px;
top: 50px;
}
#div2{
background-color: green;
}
#div3{
background-color: blue;
}
article{
width: 600px;
height: 600px;
background-color: gray;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<article>
<div id="div1">红</div>
<div id="div2">绿</div>
<div id="div3">蓝</div>
</article>
</body>运行的结果为（由左➡右）
绝对定位的盒子从标准流中脱离，对其后的兄弟盒子定位没有影响，其他盒子就好像整个盒子不存在一样。原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后，生成一个块级框，与原来它在正常流中生成的框无关。
5.练习：
如图：
代码如下：
<style>
div{
width: 100px;
height: 100px;
background-color: gray;
margin: 3px;
}
#div1{
width: 50px;
height: 50px;
background-color: white;
position: absolute;
left: 100px;
top: 80px;
}
#div2{
width: 50px;
height: 50px;
background-color: white;
position: absolute;
left: 300px;
top: 80px;
}
#div3{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 200px;
top: 160px;
}
#div4{
width: 30px;
height: 30px;
background-color: green;
position: absolute;
left: 210px;
top: 170px;
}
article{
width: 450px;
height: 450px;
background-color: gray;
position: absolute;
left: 500px;
top: 100px;
}
#div5{
width: 170px;
height: 38px;
background-color: white;
position: absolute;
left: 100px;
top: 250px;
padding-left: 80px;
padding-top: 10px;
}
</style>
</head>
<body>
<article>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5">绝对定位练习</div>
</article>
</body>
原文地址：https://blog.csdn.net/Tu_17/article/details/143751781
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！