#jquery #html #css
#jquery #HTML #css
Вопрос:
Здесь есть темы, которые объясняют, что position:relative в родительском элементе сделает position:absolute в любых дочерних элементах относительно верхнего левого края родительского элемента. Это нормально.
Но как насчет того, когда вы не хотите устанавливать родительское значение position:relative? В довольно стандартной системе форм у меня возникает проблема, что position:relative имеет два значения:
- Он определяет, как этот элемент позиционируется и
- Это изменяет способ позиционирования дочерних элементов этого элемента, если их позиционирование является абсолютным.
Но я хочу 2. без 1. Я хочу, чтобы дочерние элементы были относительно родительского, но родительский элемент может располагаться статически, относительно или абсолютно1.
Я полагаю, я мог бы добавить внутренний div внутри родительского элемента, который ничего не делает, кроме как имеет position:relative, но это было бы болезненно и лишним беспорядком. Есть ли лучший способ или сделать это?
Все позиционирование выполняется в jquery, поэтому подойдет решение только для jquery.
Спасибо
Комментарии:
1. одно простое решение — вам нужны 2 оболочки. Первая оболочка является родительской, вторая оболочка является единственным прямым дочерним элементом родительской (первой оболочки), и эта вторая оболочка будет содержать все дочерние элементы первой оболочки. Таким образом, вы можете установить значение
position:relativeдля второй оболочки, в то время как вы можете свободно устанавливатьpositionдля первой оболочки то, что вы хотите.2. позиция: относительное позиционирование элемента относительно его нормального (== статического) положения. без дальнейшего css разницы нет, поэтому просто используйте relative вместо static / nothing или используйте absolute при желании. в обоих случаях дочерние элементы с position:relative должны работать должным образом.
3. Вам не нужно менять положение на относительное, если оно уже является относительным, фиксированным или абсолютным. Если оно было статическим, изменение его на относительное не внесет никаких изменений в макет элемента.
Ответ №1:
Похоже, вы действительно задали и ответили на свой собственный вопрос.
Я полагаю, я мог бы добавить внутренний div внутри родительского элемента, который ничего не делает, кроме как имеет position:relative, но это было бы болезненно и лишним беспорядком. Есть ли лучший способ или сделать это?
Элемент не может иметь гибрид позиций, так что это действительно единственное решение; создать дополнительный элемент, который позволяет комбинировать желаемые позиционные макеты.
Все позиционирование выполняется в jquery, поэтому подойдет решение только для jquery.
Если у вас были опасения по поводу чистоты разметки, то добавление дополнительного элемента с помощью jquery может привлечь вас. Однако, как начинающий пурист, я склонен избегать использования javascript для презентационных аспектов, строго говоря, это следует оставить CSS везде, где это практически возможно.
Комментарии:
1. Спасибо за это. Это приложение forms, в котором html генерируется во время выполнения из записей БД, но все же хочется, чтобы сгенерированная разметка была как можно более чистой, чтобы программистам было легче читать и отлаживать. Другой возможный вариант — расширить jquery, чтобы внутренние элементы располагались абсолютно, а система вычисляла относительное смещение от родительского смещения.
2. При таком подходе вы переносите сложность с разметки на js, которую программистам все еще приходится читать и понимать.
3. Итак, я выбрал это в качестве решения и фактически использовал это в своем коде. Я думаю, что все идеалы вокруг «семантического html» (помните это?) Нарушаются, когда вы добавляете элементы только для того, чтобы обойти вещи, но это так 🙂 еще раз спасибо.