版权声明：如需转载，请注明出处 https://blog.csdn.net/qq_36260974/article/details/88429289
定位
绝对定位
-
设置绝对定位的元素从文档流中完全删除，以浏览器的左上角为相对位置，设置水平位置和垂直的位置。
-
position: absolute;
设置绝对定位， 当前的div脱离文档流，宽度变为 0。 -
left: 20px;
距离浏览器的左边框 20px。 -
top: 80px;
距离浏览器的上边框 20px，right：距离右边框，bottom：距离下边框 。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> www.weiyuxuan.com </title>
</head>
<style type="text/css">
body
{
margin: 10px;
font-size: 12px;
font-family: Arial;
}
.outside
{
width: 500px;
height: 200px;
background-color: #a9d6ff;
border: 1px dashed black;
}
.inside
{
padding: 10px;
background-color: #fffcd3;
border: 1px dashed black;
width: 100px;
position: absolute;
left: 20px;
top: 80px;
}
</style>
<h1> 定位 </h1>
<hr>
<body>
<div class="outside">
<div class="inside"> 绝对定位 </div>
</div>
</body>
</html>
结果图：
CSS 绝对定位对宽度的影响
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> www.weiyuxuan.com </title>
</head>
<style type="text/css">
body
{
margin: 10px;
font-size: 12px;
font-family: Arial;
}
.outside
{
width: 500px;
height: 200px;
background-color: #a9d6ff;
border: 1px dashed black;
}
.inside
{
padding: 10px;
background-color: #fffcd3;
border: 1px dashed black;
width: 100px;
position: absolute;
left: 20px;
top: 80px;
right:20px;
bottom: 80px;
}
</style>
<h1> 定位 </h1>
<hr>
<body>
<div class="outside">
<div class="inside"> 绝对定位 </div>
</div>
</body>
</html>
结果图：
如有错误，欢迎指正！