2015-06-30 3 views
0

Небольшое всплывающее окно сообщило мне, что у меня в браузере появился новый подписчик Twitter. Я нажал на элемент проверки, чтобы сориться, и, конечно, не удивился, что это элемент фиксированной позиции, но CSS удивил меня.Поля против позиций в элементах фиксированной позиции

#spoonbill-outer { 
position: fixed; 
right: 0px; 
bottom: 0px; 
margin: 22px; 
z-index: 10; 
} 

Есть ли причина для использования поля вместо right:22px, bottom:22px?

+0

Это потому, что маржа не будет позиционировать элемент, как предполагалось. Чтобы поместить фиксированный элемент, вы должны использовать либо права, и левый, и верхний и/или нижний свойства. – Marcello

+0

@unheilig, но twitter использует поля, а не свойства правого левого верхнего дна. – user3238414

ответ

0

Интересный момент для рассмотрения, я пробовал его в обоих направлениях, и по существу оба подхода приводят к одному и тому же результату.

Я бы сказал, что оба подхода эквивалентны в простейшем примере.

Если вы посмотрите на спецификацию CSS, смещения влево/вправо и поля слева/справа и ширину можно ограничить в зависимости от того, какие значения указаны или установлены в auto.

См: http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width

Однако, мне было трудно представить себе случай, в котором задающие смещения в сравнении с полями будет иметь значение (там может быть экзотический случай, но я не могу думать об этом с верхней моей головы).

body { 
 
    margin: 0; 
 
} 
 
.popup { 
 
    background-color: yellow; 
 
    position: fixed; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: 40px; 
 
} 
 
.popup-alt { 
 
    background-color: lightblue; 
 
    position: fixed; 
 
    right: 40px; 
 
    bottom: 40px; 
 
}
<div class="popup">Yellow Popup Element</div> 
 
<div class="popup-alt">Blue Popup Element</div>