- 一个已设置宽高的块状元素设置position:absolute后会保持他原来宽高
- 一个内联元素设置position:absolute会自动转为一个块状元素
- 没有设置宽高的块级元素设置position:absolute;left:0;top:0之后会继承父级元素的宽。
举个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding:0;}
.parent{margin:100px 100px;width: 300px;height: 300px;border:1px solid #000;position: relative;}
.child{position: absolute;left: 0;top: 0;background: lightblue;}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是一个没有宽高的块级元素。(设置绝对定位后，默认宽度继承父级的宽度)</div>
</div>
</body>
</html>
效果图：
1.png
- 内联元素设置position:absolute;left:0;top:0之后会继承父级元素的宽。效果同上述块级元素。
<style type="text/css">
*{margin: 0;padding:0;}
.parent{margin:100px 100px;width: 300px;height: 300px;border:1px solid #000;position: relative;}
.child{position: absolute;left: 0;top: 0;background: red;}
</style>
</head>
<body>
<div class="parent">
<span class="child">我是一个没有宽高的块级元素。(设置绝对定位后，默认宽度继承父级的宽度)</span>
</div>
</body>
效果图：
2.png
测试内联元素设置绝对定位后是否转换成块级元素（通过设置宽高）：
<style type="text/css">
*{margin: 0;padding:0;}
.parent{margin:100px 100px;width: 300px;height: 300px;border:1px solid #000;position: relative;}
.child{position: absolute;left: 0;top: 0;background: red;width: 200px;height: 200px;}
</style>
</head>
<body>
<div class="parent">
<span class="child">我是一个内联元素。(设置绝对定位后，再为其设置宽高，验证是否转换为块级元素)</span>
</div>
</body>
效果图：
3.png
- 没有设置宽度的div，再设置position：absolute;left:50%后，宽度会继承父级宽度的一半。
<style type="text/css">
*{margin: 0;padding:0;}
.parent{margin:100px 100px;width: 300px;height: 300px;border:1px solid #000;position: relative;}
.child{position: absolute;left: 50%;top: 0;background: red;}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是一个没有设置宽高的块级元素。(设置绝对定位，并将left值设置为50%后，宽度会被限制为父级宽度的一半。)</div>
</div>
效果图：
4.png
测试是否在设置left：50%后，其宽度真正变为父级宽度的一半：
<style type="text/css">
*{margin: 0;padding:0;}
.parent{margin:100px 100px;width: 300px;height: 300px;border:1px solid #000;position: relative;}
.child{position: absolute;left: 50%;top: 0;background: red;transform: translateX(-50%);}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是一个没有设置宽高的块级元素。(设置绝对定位，并将left值设置为50%后，添加transform:translateX(-50%)进行验证上述结论。)</div>
<!-- <div class="child">我是一个没有设置宽高的块级元素。(设置绝对定位，并将left值设置为50%后，宽度会被限制为父级宽度的一半。)</div> -->
</div>
效果图：
图片.png
很遗憾没有实现想要的效果（但是：通过left:50%;和transform:translateX(-50%)可以实现元素居中的效果）
然后又验证了将文本中transform:translateX(-50%)这句去掉，的确能够验证——“我是一个没有设置宽高的块级元素。(设置绝对定位，并将left值设置为50%后，宽度会被限制为父级宽度的一半。)”，猜想可能只是对中文才有这样的效果吧。
- 对于内联元素，设置position:absolute;left:50%后，同样具有像块级元素一样的现象。
<style type="text/css">
*{margin: 0;padding:0;}
.parent{margin:100px 100px;width: 300px;height: 300px;border:1px solid #000;position: relative;}
.child{position: absolute;left: 50%;top: 0;background: red;transform: translateX(-50%);}
</style>
</head>
<body>
<div class="parent">
<span class="child">我是一个没有设置宽高的块级元素。(设置绝对定位，并将left值设置为50%后，添加transform:translateX(-50%)进行验证上述结论。)</span>
<!-- <span class="child">我是一个没有设置宽高的块级元素。(设置绝对定位，并将left值设置为50%后，宽度会被限制为父级宽度的一半。)</span> -->
</div>
</body>
网友评论