为什么开发工具将此内联元素列为块？

Question

这是什么魔法？内联否决了所有其他规则，但它表示它是阻止的。

的代码是下面（该问题与在div，不嵌套的跨度）：

.mycaption { 
 
    position: absolute; 
 
    left:5%; 
 
    z-index: 10; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
    color: red; 
 
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6); 
 
    display: inline; 
 
    width:100%; 
 
    }

<div class="mycaption"> 
 
    <span>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed DO eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim AD minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip EX ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span> 
 
</div>

JSBin.

Answer 1

这是因为绝对定位的元素被取out of the content flow，因此它与任何东西can't be "inline"。它可以是flex，block,none或与现有内容流无关的任何其他显示类型。