Что-то не так с позиционированием всех элементов относительно?

Часто я привязываю класс к элементу только для того, чтобы дать ему position: relative;, чтобы я мог позиционировать его дочерние элементы, используя position: absolute;

Будет ли что-нибудь не так или, лучше сказать, сломается ли что-нибудь, если я напишу:

* {
  position: relative;
}

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

div, navbar, footer, section, aside, header, article {
  position: relative;
}

Согласно W3schools, все элементы по умолчанию имеют position: static;, что соответствует нормальному расположению страницы.

«Элементы HTML по умолчанию позиционируются статично. Элемент со статическим позиционированием всегда позиционируется в соответствии с обычным потоком страницы».

и, согласно тому же источнику, относительно расположенные элементы также располагаются в соответствии с обычным потоком страницы, если только они не переопределены с помощью CSS:

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


html css css-position
person Jon Kyte    schedule 11.04.2014    source источник
comment
Нет... но зачем вам это нужно?   -  person Paulie_D    schedule 11.04.2014
comment
Вы можете столкнуться с проблемами, если хотите абсолютно позиционировать и элемент внутри элемента, находящегося выше по дереву. Вы сможете позиционировать только относительно следующего предка   -  person Turnip    schedule 11.04.2014
comment
В том, что вы делаете, нет ничего плохого, но тогда вам нужно дать каждому элементу позицию в соответствии с его отношением к другому элементу. Я бы рекомендовал использовать позиции для элемента только тогда, когда это действительно необходимо. Как сказал 3rror404, вы можете столкнуться с проблемами выше по дереву.   -  person CvR    schedule 11.04.2014
comment
@Paulie_D Просто так мне не нужно прикреплять класс к родительскому элементу с единственной целью - изменить его позиционирование. Просто мне кажется грязным.   -  person Jon Kyte    schedule 11.04.2014
comment
Зачем вам присоединять класс, чтобы добавить одно свойство? Просто добавьте свойство, когда это необходимо.   -  person Paulie_D    schedule 11.04.2014
comment
Я понимаю, что вы оба говорите @ 3rror404 и CvR, однако, если бы я хотел поместить элемент в родительский элемент выше по дереву или телу, я не понимаю, почему бы мне просто не переместить его, чтобы он был прямым дочерним элементом элемента, который я хотел, чтобы он располагался относительно тоже?   -  person Jon Kyte    schedule 11.04.2014
comment
@Paulie_D Извините, я не понимаю, что вы говорите. Я говорю, что если у меня есть div (divA), и я хочу разместить другой div абсолютно на этом (divB), мне нужно будет прикрепить класс .relative к divA, чтобы я мог прикрепить класс .absolute в раздел B. Я знаю, что это всего лишь вспомогательный класс с одним правилом, и это ничего не значит с точки зрения производительности, я просто спросил из любопытства, почему мы просто не делаем * {position: relative;}, чтобы сэкономить время/сделать код менее тяжелым.   -  person Jon Kyte    schedule 11.04.2014

Ответы (4)


arrow_upward
5
arrow_downward

Да это так. Если вы попытаетесь позиционировать один элемент absolute, он позиционируется относительно ближайшего предка, который имеет CSS position, отличный от static.

Если каждый элемент имеет position:relative, это будет прямой родитель.

Но вы можете захотеть расположить абсолютный элемент относительно элемента выше в дереве DOM или, может быть, абсолютно в теле страницы.

В какой-то момент у вас может возникнуть ситуация, когда вы не полностью контролируете HTML. Тогда вы увидите, что устанавливать все relative контрпродуктивно.

Примером может быть меню слоя phat. У вас есть слой внутри класса .menu где-то глубоко в джунглях иерархических ul li элементов. Это должно быть расположено относительно позиции элемента .menu. Возможно, вам не захочется менять здесь дерево DOM.

person yunzen    schedule 11.04.2014
comment
Ваш ответ имеет смысл, но мне просто интересно, если бы я хотел поместить элемент в прародителя или тело - не мог бы я просто переместить его, чтобы он был прямым потомком, если он будет абсолютно позиционирован, это не будет в потоке документов, поэтому его позиция в HTML не важна? - person Jon Kyte; 11.04.2014
comment
Изменение вашей разметки только для того, чтобы она соответствовала чрезмерно усердному CSS, сводит на нет всю цель разделения между представлением и структурой. Есть причина, по которой начальное значение position не равно relative. - person BoltClock; 11.04.2014
comment
@JonKyte В какой-то момент у вас может возникнуть ситуация, когда вы не полностью контролируете HTML. Тогда вы увидите, что бесполезно устанавливать все relative. - person yunzen; 11.04.2014
comment
@BoltClock Я спрашиваю с более теоретической точки зрения, я просто никогда полностью не понимал, почему я никогда не видел, чтобы кто-то делал это, я хотел знать недостатки. - person Jon Kyte; 11.04.2014
comment
@HerrSerker Это именно то падение, которое я искал, спасибо. - person Jon Kyte; 11.04.2014
comment
@JonKyte Примером может быть меню слоя phat. У вас есть слой внутри класса .menu где-то глубоко в джунглях иерархических ul li элементов. Это должно быть расположено относительно позиции элемента .menu. Возможно, вам не захочется менять здесь дерево DOM. - person yunzen; 11.04.2014

arrow_upward
2
arrow_downward

Если вы примените position: relative ко всем элементам на странице, вы не сможете эффективно использовать position: absolute, потому что вы не можете расположить элемент по отношению к прародителю, и вы, вероятно, непредсказуемым образом сломаете внешние плагины/модули, которые полагаются на position: absolute .

У вас могут возникнуть проблемы с z-index (например, в раскрывающемся меню), и вы в конечном итоге перезапишете это поведение с помощью position: static и position: absolute.

person Microcipcip    schedule 11.04.2014
comment
Проголосовал за рассмотрение плагинов - я не думал о плагинах, однако, если бы они имели position: absolute;, это было бы сделано с использованием CSS, что было бы более мощным правилом, чем *, и, следовательно, перезаписало бы набор position: relative; для всех элементов. - person Jon Kyte; 11.04.2014
comment
На самом деле, я думаю, у вас все еще могут быть проблемы, потому что плагин будет использовать стандартную среду css (не загрязненную универсальным селектором) и может попытаться стилизовать элемент position: absolute для внуков этого элемента, и это, конечно, будет сломать плагин. - person Microcipcip; 11.04.2014
comment
Совершенно верно, я не подумал об этом, отличное понимание, спасибо за ваш вклад. - person Jon Kyte; 11.04.2014

arrow_upward
0
arrow_downward

Что касается меня, использование position:relative не очень хорошо, потому что иногда вам нужно расположить elemet относительно окна браузера, и это создаст для вас проблему. Но если вы уверены, что не будете этого делать, вперед

person AlexPrinceton    schedule 11.04.2014

arrow_upward
0
arrow_downward

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

Например, это было бы проблемой, если бы вы пытались расположиться в центре тела.

person Pat Long - Munkii Yebee    schedule 11.04.2014