부모의 부모를 지칭하는 너비의 백분율

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 %를 확인하고 대상 요소를 자신의 부모의 비율 폭을 가질 수 있습니다

#fluid { 
    width: 75vw; 
} 

#fixed { 
    width: 100%; 
} 

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

고정 폭과 관련이 아이를 가진 '중간'사업부를 갖는 그 조부모는 유감스럽게도 불가능합니다. 왜냐하면 그 아이는 그 직접적인 부모에게만 상대적 일 수 있기 때문입니다.

(일반적인 시나리오에서) 달성하고자하는 한 가지 해결책은 #text을 #fixed 밖으로 이동시키고 둘 다 상대적으로 배치 된 두 위치 모두 절대적으로 배치하는 것입니다. 그들은 모두 당신이 궁극적으로 여러 .article에들 것처럼 소리 하나 #fluid하지만 HTML 구조가 적합하지 않을 수 있도록, 동일한 원하는 효과 :

<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 */ 
} 

을주고, 같은 영역을 차지한다.

희망이 도움이됩니다. :)