Поля элемента абсолютной позиции не влияют, если он находится в другом элементе абсолютной позиции?

Question

У меня есть два типа div:

<div class="outer">
    <div class="inner"></div>
</div>

, тогда я даю им стиль как:

    .outer{ background:yellow; position:absolute; width:80%; height:80px; margin:0 10%;}
    .inner{ background:red; position:absolute; margin:0 11px; width:100%; height:80px;}

Я хочу "внутренний" во "внешнем", а также левый исправа есть пространство 11px, но это не может быть достигнуто, только слева есть пробел 11px, "внутренний", кажется, всегда имеет ту же длину, что и длина отца

Тогда я думаю, может быть, установка внешнего отступас 11px будет работать. Однако, это все еще не работает ……

Почему это произошло? Так как я могу решить эту проблему? Возможно ли это с эффектом?

Вот единственный случай

Answer 1

Поля добавятся к ширине, которая уже вытянута к внешнему DIV (width 100%), что вы можете сделать следующим образом - ссылка :

.outer{ background:yellow; position:absolute; width:80%; height:80px; margin:0 10%; padding: 0 11px}
.inner{ background:red; height:80px;}

Answer 2

Удаление position: absolute; (или изменение его на relative) и width: 100%; с .inner даст вам именно то, что вы хотите. Затем, если вам действительно нужен элемент с position: absolute; внутри, поместите его в .inner.

Пример