相対位置と絶対位置との間のパディング

Question

子要素の相対位置を絶対位置から絶対位置に変更しています。

children要素の幅は、親の幅のパーセンテージです。 relativeをabsoluteからabsoluteに変更すると、パーセンテージに親のパディングが追加されるようになりました。デモで黒いdivをホバーします。

• 子供の割合には親の詰め込みが含まれないようにするにはどうすればよいですか？

• なぜ両方の位置の値が異なるか？

JSFiddle。

body { 
 
    margin: 0; 
 
} 
 

 
#parent { 
 
    width: calc(100% - 100px); 
 
    height: 100vh; 
 
    padding-right: 100px; 
 
    background: pink; 
 
    position: relative; 
 
} 
 

 
.children { 
 
    position: relative; 
 
    width: 50%; 
 
    height: 100%; 
 
    background: black; 
 
    float: left; 
 
} 
 
.children:nth-child(2) { 
 
    background: grey; 
 
} 
 

 
#parent:hover .children { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
#parent:hover .children:nth-child(2) { 
 
    left: 50%; 
 
}

<div id="parent"> 
 

 
    <div class="children"></div> 
 
    <div class="children"></div> 
 

 
</div>

Answer 1

要素がposition:absoluteに設定されている場合は、それを含むボックスは親のパディングボックス（パディングの周りにボックス）です。あなたの例の結果は正しいです。

jsFiddle

あなたはおそらく、あなたが望む結果を得るためにこれを行うことができ、親のwidth:calc(100% - 100px)はあなたの例では必要ではないようです。

#children:hover { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 100px; /* the same value as parent's right padding */ 
    width: auto; /* reset to default, depending on 'left' and 'right' values */ 
} 

EDIT

OPは実際に助けることができるcalc()を使用して、内部に2つの絶対divを持っています。

#parent:hover .children { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: calc(50% - 50px); 
} 
#parent:hover .children:nth-child(2) { 
    left: calc(50% - 50px); 
} 

しかし

jsFiddle

、最も簡単な方法は親に追加のコンテナーを追加すること、および、それに変わらないスタイルの残りの部分をパディングと背景を設定します。

jsFiddle

<div id="container"> 
    <div id="parent"> 
    <div class="children"></div> 
    <div class="children"></div> 
    </div> 
</div> 

---

#container { 
    padding-right: 100px; 
    background: pink; 
} 
#parent { 
    height: 100vh; 
    position: relative; 
} 

Answer 2

可能な解決策：ホバー上の#childrenにwidthプロパティを追加します。

#children:hover { 
    width: calc(100% - 100px) /* <-- Add this */ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Answer 3

絶対配置要素は、それの親の流れから取り出されるためです。

したがって、親のパディングは認識されなくなりました。

単に、祖先が相対的な位置または絶対的な位置を持つ祖先の境界に関連しています。境界線の0,0の点は、境界線のすぐ内側の点であり、右端の境界線の直前で右境界線に水平に伸びます。

したがって、親にした絶対配置された要素に同様のパディングを定義する必要があります。