2011-12-24 4 views
0

Я ожидал, что следующее место разместит внутренний (красный) квадрат в позиции 50,50 в кадре координат окна браузера. Но это не так. Зачем?Зачем оставлять заполнение не работает?

<body> 
<div style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: yellow; padding: 50px;"> 
    <div style="position: absolute; left: 0px; right: 0px; width: 64px; height: 64px; background-color: red"> 
    </div> 
</div> 
</body> 

SORRY МОЙ FAULT

я желая сделать "сверху: 0px" для внутренней DIV, но написал "правильный: 0px" вместо этого. Просто ошибка.

+0

Это скорее .... своеобразный .... способ делать вещи. Не могли бы вы рассказать нам, почему вы используете 'position: fixed 'и' position: absolute' таким образом? Может быть лучшее решение для того, что вы пытаетесь выполнить. –

+0

Вы хотите, чтобы красный квадрат оставался в этом положении при прокрутке? Я не был уверен, что вы подразумеваете под «рамкой координат окна браузера». – moey

+0

Пожалуйста, напишите и примите свой ответ, если вам кажется, что вы решили этот вопрос. – Wex

ответ

3

position: absolute; принимает ваш элемент из нормального потока. Поскольку вы укажете, что он оставлен как 0, вот где это будет.

+0

, так почему же он не делает то же самое с вершиной? – Dims

2

Ваше внутреннее положение div - absolute. попробуйте relative, или вообще не устанавливайте этот атрибут.

0

Ну, это потому, что вы position: absolute это иметь left: 0; Вы, вероятно, хотите что-то вроде этого:

<body> 

    <div style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: yellow; padding: 50px;"> 
     <div style="position: absolute; left: 50px; right: 0px; width: 64px; height: 64px; background-color: red"> 
     </div> 
    </div> 

</body> 
0

Из-за position: absolute; на Красной площади.

Вы можете взять его и получить this, или установить left и получить this.

Кроме того, в качестве побочного примечания некоторые люди предлагают (включая меня) не прикреплять единицы измерения к свойству CSS, когда значение равно 0. Нуль чего-то еще равен нулю, поэтому 0px, 0em и т. Д. не имеет значения, он всегда принимает значение 0.

0

левый правый верхний и нижний css означает «расстояние от». Он не предназначен для использования так, как вы его используете.

Вот лучший пример: http://jsfiddle.net/xAuLJ/

<body> 
<div style="position: fixed; width:100%; height:100%; background-color: yellow;"> 
    <div style="position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin-top:-32px; margin-left:-32px; background-color: red"> 
    </div> 
</div> 
</body> 
0

Это была моя собственная вина. Я хотел сделать «top: 0px» для внутреннего DIV, но вместо этого написал «right: 0px». Когда элемент перемещался вниз, но не правильно, я решил, что верхнее дополнение обрабатывается иначе, чем слева.

+0

Наверное, лучше всего включить это в свой вопрос, а не создавать новый ответ. – mc10

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