div фиксированный внутри div относительно - такой же размер, но фиксированный больше?

Question

У меня есть div, закрепленный внутри относительного.

моя проблема, то DIV фиксированной больше, чем другие, но они имеют одинаковый размер:

<div id=all> 

    <div id=top></div> 

</div> 

.

#all{ 
    width:80%; 
    height:100px; 
    border:1px solid #000; 
    position:relative; 
} 

#top{ 
    width:80%; 
    height:100px; 
    position:fixed; 
    background:rgba(255,0,0,.5); 
} 

https://jsfiddle.net/y7yc0n21/

мне нужно Див сверху быть исправлена. что не так? Почему div top больше, чем div all?

Answer 1

Ширина фиксированного элемента рассчитывается в отношении ширины окна просмотра, тогда как одна для другой рассчитывается в отношении ширины ее родительского элемента, которая в этом случае равна body.

И ширина тела отличается от ширины окна просмотра, потому что тело получает запас по умолчанию и/или заполнение применяется из таблицы стилей по умолчанию - так что вы принимаете 80% из двух различных входных значений, и для них результатов также различны.

Ликвидировать по умолчанию маржи/отступы для тела, и проблема исчезла:

body { 
    margin:0; 
    padding:0; 
} 

https://jsfiddle.net/y7yc0n21/2/

Answer 2

Если указать

body { 
    margin:0; 
} 

они станут такими же ширинами.

Кроме того, я думаю, что это не то, что вы хотите, поскольку фиксированное вычисляется относительно видового экрана.

фиксированной Не оставляйте пространство для элемента. Вместо этого расположите его в указанной позиции относительно экрана просмотра экрана и не перемещайте его при прокрутке.

https://developer.mozilla.org/en/docs/Web/CSS/position

Answer 3

#all{ 
    width:80%; 
    height:100px; 
    border:1px solid #000; 
    position:relative; 
} 

#top{ 
width:80%; 
height:100px; 
position:absolute; 
background:rgba(255,0,0,.5); 
} 

Answer 4

Если вы дать какой-либо элемент

position: fixed

это делает элемент относительно окна просмотра, а не это offsetParent. Поэтому ширина div 'top' вычисляется на 80% в зависимости от ширины окна просмотра, а не от ее родительского div 'all'. Таким образом, ваш внутренний div имеет большую ширину, чем внешний.