, как наследовать ширину для для ребенка ребенка

Question

У меня есть 3 метки: первый главный div, второй является figure и внутри есть figcaption, как это:

<div class="main-div"> 
    <figure> 
    <figcation> 
    </figcaption> 
    </figure> 
</div> 

Я назначен главным div будет 80% ширины всего документа. Затем я установил figure как 100% своего родителя, так что он полностью обертывается вокруг основного div.

После этого я дал figcation позицию absolute, и я хочу, чтобы иметь 100% ширины основного div подобно figure, потому что ее ширина только работает как содержимое внутри заканчивается.

Итак, как назначить ширину для figcaption, чтобы быть полной шириной основного div?

Я пробовал наследовать, но он не работает. Также я не могу получить тег figcaption за пределами figure, потому что семантически это было бы неправильно.

Answer 1

Я думаю, что вам не хватает position: relative на одном из родительских элементов figcaption «s div или figure:

figure { 
    position: relative; 
} 

figcaption { 
    position: absolute; 
} 

Если вы используете position: absolute; в top|right|bottom|left значения, а также width и height значения, как проценты рассчитываются в отношение к ближайшему родителю, у которого нет позиции static. Так что это относительно ближайшего элемента с позицией relative|absolute|fixed или, наконец, html -элемент.

Demo

Try before buy

Answer 2

Дать позицию фигуры: относительная.

Позиция абсолютной потребности в контейнере «позиционируется».