коробка-размер + граница + абсолютный ребенок

Я недавно обнаружил эту проблему.коробка-размер + граница + абсолютный ребенок

Что касается меня, схема ведет себя неправильно, не так ли? Не должна ли полевая модель элемента .outside включать его границы, так что позиционированный дочерний элемент absolute также очерчивает эти границы?

Это известная проблема? Это действительно правильное поведение? Если да, может кто-нибудь объяснить мне, почему это так?

What I expected to have as result

Пожалуйста, не комментируйте, как решить эту проблему. Но, пожалуйста, объясните, почему возникает проблема.

Заранее спасибо :)

Привет PHLIPS

источник

2016-05-25 phlipsgeisler

вы не установили '' border' но outline' ... то есть проблема – jakob

https://jsfiddle.net/2mytb43a/1/ - теперь с границей - та же проблема – phlipsgeisler

wait .. что вы спрашиваете на самом деле? вы хотите, чтобы граница изнутри div была где? – jakob

Это нормально, потому position: absolute который будет позиционировать элемент относительно контейнера. По умолчанию контейнер является окном браузера, но если у родительского элемента есть position: relative или position: absolute, то он будет действовать как родительский для координаты позиционирования для своих детей.

С родителем, у вас есть 2 атрибута:

border-right: 50px #f5f solid; 
border-bottom: 50px #f5f solid;

Если вы удалите его, наброски будут полный размер, потому что вы установили 4 атрибуты: top, right, bottom, left 0. (изменить его, чтобы увидеть изменения).

источник

2016-05-25 09:55:59

Хорошо, да. Но не должны ли границы находиться внутри моего родительского контейнера из-за 'box-sizing: border-box'? И поэтому дочерний элемент покрывает границы родителя? – phlipsgeisler

Я предполагаю, что вы поняли меня неправильно. С помощью этого кода (https://jsfiddle.net/2mytb43a/) я ожидал этого результата (https://jsfiddle.net/2mytb43a/2). – phlipsgeisler

Просто box-sizing: border-box не хватает, вам нужно наследовать ширину и высоту от родителей:

.inside { 
    position: absolute; 
    outline: #00f solid 2px; 
    width: inherit; 
    height: inherit; 
}

Проверить здесь https://jsfiddle.net/2mytb43a/3/

источник

2016-05-25 10:16:34 jakob

Хорошо, спасибо. Но почему здесь не работает 'top/left/right/bottom: 0'? – phlipsgeisler

Поскольку вы не задавали ширину/высоту, не было унаследованной ширины/высоты, поэтому ребенок не может знать, что нового размера родителя, который установлен с новым размером окна. – jakob

коробка-размер + граница + абсолютный ребенок

ответ

Смежные вопросы