親の親に参照される幅の幅

Question

パーセントを作成する方法があるかどうかは、親の親を参照しているかどうかを調べようとしています。

以下の例では、テキストの親の幅が白色の幅ではなく、緑色のdivの幅を持つようにしたいと考えています。

#fluid { 
 
    width: 75vw; 
 
    height: 75vh; 
 
    background: olive; 
 
    position: absolute; 
 
} 
 

 
#fixed { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: white; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
#text { 
 
    color: black; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    margin: 0; 
 
}

<div id="fluid"> 
 
    <article id="fixed"> 
 
    <h3 id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3> 
 
    </article> 
 
</div>

私はこの使用のみCSSを達成できるいくつかの方法はありますか？

Answer 1

残念ながら、要素に幅のあるを直接祖父母に対してにすることは不可能です。ただし、祖父母の親を100％にすると、ターゲット要素に独自の親の割合幅を持つことができます。

固定幅との関連性の子供を持つ「真ん中」のdivを持つ

#fluid { 
    width: 75vw; 
} 

#fixed { 
    width: 100%; 
} 

#text { 
    width: 50% /* 37.5vw */ 
} 

その祖父母は残念なことに不可能です。なぜなら、子供はその直接の親と相対的でしかないからです。あなたは（典型的なシナリオで）を達成しようとしているものに

一つの解決策は、#fluid比較的位置付けで、#fixedの外に#textを移動し、それらの両方が絶対位置持つことであろう。彼らは両方のHTML構造が合わないように、あなたは最終的に、複数の.article秒を持っている、唯一の#fluidでしょうかのように聞こえるけど、同じ所望の効果:)

<div id="fluid"> 
    <article id="fixed"></article> 
    <h3 id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3> 
</div> 

#fluid { 
    position: relative; 
    width: 75vw; 
} 

#fixed { 
    position: absolute; 
    width: 100px; 
} 

#text { 
    position: absolute; 
    width: 50% /* 37.5vw */ 
} 

を与え、同じ面積を占めます。

希望すると便利です。 :)