- 一個已設置寬高的塊狀元素設置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>
