Название, в основном. Я выполнял большую часть своей работы, используя позиционирование маркеров вместо материала типа position: relative, просто потому, что я не знал, что вы можете управлять им таким образом.
Что предполагается margin, и почему я должен использовать position, когда margin выполняет задание?
Вкратце, поля добавляют пространство вокруг поля элемента и изменяют объем зарезервированного для него пространства в потоке страницы, чтобы он соответствовал. Таким образом, верхний край перемещает блок вниз, а также перемещает весь контент, который следует за ним. Нижний край перемещает содержимое, которое следует за ним, оставляя блок в том же месте. Это очень интуитивно понятно и, вероятно, ведет себя точно так, как вы ожидали.
Относительное позиционирование делает что-то странное: оно изменяется там, где выполняется блок, но не там, где зарезервировано место для него. Таким образом, если вы используете относительное позиционирование и установите верхнюю часть на 10 пикселей, окно будет перемещено на 10 пикселей вниз по странице, но содержимое после него не будет перемещаться. Это может привести к тому, что поле будет перекрываться с содержимым, следующим за ним.
Если вам действительно нужен странный эффект (и чтобы увидеть относительное позиционирование в действии), примените как float: left, так и относительное позиционирование к маленькому блоку. Блок будет перемещен, но область, зарезервированная для него, останется в исходном месте.
Я сделал вам пример:
<div style="position: relative; left: -100px; width: 100px; height: 100px; float: left;">
</div> (lorem ipsum text)
Во-первых, статическое позиционирование игнорирует значение top, поэтому я думаю, что ваш вопрос немного запутан. Если бы вы хотели спросить, было ли это position:relative, то вот ответ, который обращается к этому.
В целом я считаю гораздо лучше использовать поля и отступы для позиционирования элементов относительно своих соседей, а не относительного позиционирования (что, как я полагаю, вы действительно спрашиваете, поскольку статическое позиционирование игнорирует значение top).
Относительное позиционирование или отрицательные поля могут вызывать перекрывающиеся объекты, и это редко бывает то, что я хочу, и может привести к некоторым проблемам с маршрутизацией событий, границами, фонами и т.д.... если это явно не то, что вы хотите. Я использую position:relative как контейнер для детей position: absolute, но практически никогда не использую его для перемещения элемента самостоятельно, поскольку границы и отступы для этого почти всегда являются более чистыми.
Что касается дополнительной части вашего вопроса о том, что делает маржа, вы, вероятно, должны сделать небольшой поиск, а затем некоторое чтение в виде нескольких диаграмм, вероятно, действительно поможет вам визуализировать это. Маржа - это внешний набор пикселей вокруг объекта. Внутри края находится граница. Внутри рамки находится отступы, а внутри прокладки - это содержимое. Таким образом, маржа - это количество пикселей вокруг объекта, находящегося за пределами границы, а заполнение - это количество пикселей между границей и содержимым объекта.
Если у вас нет заданной границы, поля и дополнение обеспечивают очень похожие эффекты, за исключением того, что поля соседних объектов иногда сворачиваются (например, объединены в один запас), но заполнение никогда не объединяется таким образом, а фон распространяется на границу, но не под маркой.
Здесь вопрос/ответ StackOverflow по полям и дополнению, который предоставляет некоторые другие полезные ссылки: Когда использовать margin vs padding в CSS
Здесь хорошая статья о модели окна CSS, которая покрывает маржу и дополнение