Позиционирование множества блоков контента с помощью позиции: относительное неаккуратное кодирование?

Question

Я обнаруживаю, что размещаю множество элементов div, изображений и контента в целом с позицией: относительно привязки к дизайну, которому я следую.

Например, если я хочу разместить форму ближе к вершинеЯ бы добавил:

.form_class{
    position:relative;
    bottom:150px;
}

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

Мне кажется, что это неаккуратное программирование, как реальные веб-интеграторы позиционируют свои элементы?

Заранее спасибо.

Answer 1

Существует потенциальная проблема с использованием относительного позиционирования.

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

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

В большинстве браузеров есть инструмент разработчика, где вы можете проверить элемент, чтобы точно определить, какой CSS применяется к элементу, а также какие поля и отступы. Вы можете использовать это, чтобы выяснить, откуда бреши, чтобы вы могли удалить их у источника, а не обойти их.

Answer 2

Существует множество способов позиционирования элементов: от полей и отступов, абсолютного позиционирования, поплавков, родительских контейнеров, явных значений ширины и высоты.Не видя вашей разметки, ее трудно критиковать, но обычно есть лучшие способы, чем относительное позиционирование.Если вы хотите опубликовать некоторую разметку, попробуйте http://jsfiddle.net