2010-02-23 2 views
14

Неужели это вызовет у меня невыразимое горе, если я буду придерживаться его в верхней части моей таблицы стилей?Является ли {{позиция: относительная} плохая идея?

* {position:relative} 
+1

Название и вопрос не соответствуют: -? –

+0

Ну, если бы я предложил, это была хорошая идея, я бы пошел дальше и осудил статическое позиционирование. Да, они соответствуют ИМО. –

+0

«Что ж, если бы я предложил, это была бы хорошая идея, я бы пошел и устарел на статическое позиционирование». Хорошо для вас, но это не то же самое, что «позиция: относительная», «фактически» * устаревшая (что потребует CSS spec заявить, что он устарел, а это не так). –

ответ

2

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

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

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

Относительное позиционирование определенно имеет свое применение. Примените его, когда вам это нужно.

+0

id рассматривает проблему с плавающей точкой как самую большую проблему. так как задаю этот вопрос, я переехал в плавание почти все в моем DOM, поэтому я как бы стреляю себе в ногу с этой декларацией подписи, эй? –

+0

Да, я обычно избегаю подстановочных знаков в CSS. Редко можно сказать, что вы хотите, чтобы любое поведение применялось к всем элементам. Относительное позиционирование определенно имеет свое применение; просто примените его, когда вам это нужно, с помощью определенного класса CSS или даже селектора jQuery. –

11

ли это вызвать меня невыразимое горе, если я придерживаюсь его в верхней части моей таблицы стилей?

Да. Например, вы больше не сможете работать с абсолютно позиционируемыми элементами - абсолютное позиционирование всегда будет относиться к родительскому элементу, что почти никогда не является желаемым результатом.

Я мог представить, что есть еще больше полей побочных эффектов z-index настроек.

Неплохая идея ИМО.

И нет, position: static это не осуждается, в конце концов, это по умолчанию :)

+0

Mm Я стараюсь не вставлять элементы, которые являются абсолютными по отношению к окну просмотра в любом случае. Я надеялся, что это фактически уменьшит потенциальные проблемы z-index между firefox и т. Д. –

+0

@ user278457 Вы даже не сможете позиционировать абсолютный родительский элемент родителя. И исправьте меня, если я ошибаюсь, но я не вижу, как это исправит проблемы с обозревателем z-index. –

+0

Хорошо, думаю, я вижу, к чему вы клоните. Я просто так не думаю, или пока не нужно. Я предпочел бы использовать два «left: 10», чем «left: 10» у родителя и «left: 20» для ребенка. Я полагаю, что неплохо оставить опцию открытой, если вы не почувствуете особой дисциплинированности в один прекрасный день. –

3

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

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

+0

Гораздо лучшая идея. Я думаю, что буду экспериментировать с вставкой div {position: relative} в мой сброс css. –

+0

@ user278457 все еще ужасная идея.Теперь это может сработать для вас, но что, если в один прекрасный день вам понадобится абсолютное позиционирование или придется включить внешний виджет. –

+0

Я мог бы дать что-то абсолютное положение. Я просто не буду вставлять его в другой div. Я действительно не понимаю, почему вы вложили бы что-то, что расположено относительно окна просмотра. Вы имеете в виду, если я разрабатываю что-то, что должно быть включено на внешний сайт, верно? –

2

Отвечая вопрос название:

Это текущий CSS 2.1 спецификации:

http://www.w3.org/TR/CSS2/visuren.html#propdef-position

Принимаемые значения включают static, relative, absolute, fixed и inherit.

Я не уверен, CSS 3 (он все еще в стадии разработки), но они, кажется, не говоря уже о static:

http://www.w3.org/Style/CSS/current-work#positioning

Безотносительно, я бы на самом деле не все еще волнует :)

Отвечая на вопрос тела:

по умолчанию static так вы бы изменить свойство для каждого элемента страницы. Лучшее, чего вы можете достичь, - ничто. Хуже то, что вы, вероятно, создадите странные побочные эффекты, которые вы даже не заметите с первого взгляда.

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

+0

Хорошая точка. Но способ, которым они описывают относительное положение, подразумевает, что он «относителен» к такому таинственному неназванному свойству, которое работает «как определено моделью ящика». –

2

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

Это правда, что эта настройка сделает невозможным использование абсолютного позиционирования по отношению к чему-либо еще, кроме родителя прямо выше, но я считаю, что это хорошо. Поскольку первый родитель с «position: relative» является визуально де-факто родителем любого дочернего элемента с «position: absolute», тогда логично только сделать их прямыми дочерними элементами также в иерархии HTML.

Короче говоря, * {position:relative} заставляет использовать соглашение, позволяющее легче понять, как работает позиционирование.

Caveat 1: Событие, если новое соглашение упрощает работу для новых пользователей, оно отличается от того, что используются опытные разработчики CSS. Подготовьтесь к противостоянию, если вы начнете использовать это в большом проекте со многими разработчиками frontend.

Caveat 2: Вопрос об эффективности должен быть проверен надлежащим образом. Я попытался включить и отключить этот параметр на некоторых крупных сайтах, не заметив никаких различий, но реальных тестов с реальными числами не существует (насколько мне известно).

Заключительное примечание. Первая строка во втором абзаце не совсем верна. Вы всегда можете перезаписать определения подстановочных знаков, установив position: static на некоторый узел среднего уровня, если вам действительно нужно.

+0

Это вызывает проблемы с производительностью в Opera 12 (последняя версия с использованием движка Presto), поэтому будьте осторожны. Однако установка z-индекса на любое число исправляет проблему. – tomasz86

+0

Это также вызывает странные ошибки в Firefox с ячейками таблицы, у которых есть заполнение, установленное в процентах. – tomasz86

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