保證金左和位置留下了相同的百分比

Question

我有一個div給予不同的值：

width:100%; 
max-width:100%; 
position:relative; 
overflow:hidden; 

這個div的直接子是：

.my-class { 

     position:absolute; 
     bottom:6px; 
     padding-left:12px; 

} 

我希望孩子的div與其他一些內容排隊。這個div以外的任何東西都沒有影響它。當我使用left:30%時，我得到一個數字，當我使用margin-left:30%時，我得到一個不同的數字（在這種情況下是我想要的）。

是否考慮填充餘量並留下餘量？

或者還有其他因素我沒有考慮過嗎？

Answer 1

是的。
填充影響保證金。

這個例子看看：

div, span { 
 
    border: 1px solid #000; 
 
    height: 80px; 
 
    width: 80px; 
 
} 
 
.left, .marginLeft { 
 
    background: #aaf; 
 
    margin: 10px 0 0 10px; 
 
    padding: 10px; 
 
    position: relative; 
 
} 
 
.abs { 
 
    background: #faa; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.left .abs { 
 
    left: 100px; 
 
} 
 
.marginLeft .abs { 
 
    margin-left: 100px; 
 
}

<h3>Left</h3> 
 
<div class="left"> 
 
    parent 
 
    <div class="abs">left</div> 
 
</div> 
 

 
<h3>Margin left</h3> 
 
<div class="marginLeft"> 
 
    parent 
 
    <div class="abs">margin left</div> 
 
</div>