- 一個已設(shè)置寬高的塊狀元素設(shè)置position:absolute后會保持他原來寬高
- 一個內(nèi)聯(lián)元素設(shè)置position:absolute會自動轉(zhuǎn)為一個塊狀元素
- 沒有設(shè)置寬高的塊級元素設(shè)置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">我是一個沒有寬高的塊級元素。(設(shè)置絕對定位后，默認(rèn)寬度繼承父級的寬度)</div>
</div>
</body>
</html>
效果圖：
1.png
- 內(nèi)聯(lián)元素設(shè)置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">我是一個沒有寬高的塊級元素。(設(shè)置絕對定位后，默認(rèn)寬度繼承父級的寬度)</span>
</div>
</body>
效果圖：
2.png
測試內(nèi)聯(lián)元素設(shè)置絕對定位后是否轉(zhuǎn)換成塊級元素（通過設(shè)置寬高）：
<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">我是一個內(nèi)聯(lián)元素。(設(shè)置絕對定位后，再為其設(shè)置寬高，驗證是否轉(zhuǎn)換為塊級元素)</span>
</div>
</body>
效果圖：
3.png
- 沒有設(shè)置寬度的div，再設(shè)置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">我是一個沒有設(shè)置寬高的塊級元素。(設(shè)置絕對定位，并將left值設(shè)置為50%后，寬度會被限制為父級寬度的一半。)</div>
</div>
效果圖：
4.png
測試是否在設(shè)置left：50%后，其寬度真正變?yōu)楦讣墝挾鹊囊话耄?/p>
<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">我是一個沒有設(shè)置寬高的塊級元素。(設(shè)置絕對定位，并將left值設(shè)置為50%后，添加transform:translateX(-50%)進(jìn)行驗證上述結(jié)論。)</div>
<!-- <div class="child">我是一個沒有設(shè)置寬高的塊級元素。(設(shè)置絕對定位，并將left值設(shè)置為50%后，寬度會被限制為父級寬度的一半。)</div> -->
</div>
效果圖：
圖片.png
很遺憾沒有實現(xiàn)想要的效果（但是：通過left:50%;和transform:translateX(-50%)可以實現(xiàn)元素居中的效果）
然后又驗證了將文本中transform:translateX(-50%)這句去掉，的確能夠驗證——“我是一個沒有設(shè)置寬高的塊級元素。(設(shè)置絕對定位，并將left值設(shè)置為50%后，寬度會被限制為父級寬度的一半。)”，猜想可能只是對中文才有這樣的效果吧。
- 對于內(nèi)聯(lián)元素，設(shè)置position:absolute;left:50%后，同樣具有像塊級元素一樣的現(xiàn)象。
<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">我是一個沒有設(shè)置寬高的塊級元素。(設(shè)置絕對定位，并將left值設(shè)置為50%后，添加transform:translateX(-50%)進(jìn)行驗證上述結(jié)論。)</span>
<!-- <span class="child">我是一個沒有設(shè)置寬高的塊級元素。(設(shè)置絕對定位，并將left值設(shè)置為50%后，寬度會被限制為父級寬度的一半。)</span> -->
</div>
</body>
