Почему при позиционировании, элемент не остаётся на равноудалённом расстоянии от элемента с position relative?

Question

[Alex_87]

Здравствуйте, прошу мне помочь в следующем вопросе. Я задал position relative классу list и в начале, ДО правила, когда list исчезает(при уменьшении окна браузера, поскольку меню преобразовывается в гамбургер), всё работает хорошо. но потом, значок начинает вести себя по другому и расстояние между элементом posotion:relative; и элементом с position: absolute;(значком) меняется.

при уменьшении окна, после появление иконки гамбургера

Comments

[Ankhena]

Выложите ваш код на jsfiddle.net

[Alex_87]

Ankhena, Разместил, но ничего толком не показало... jsfiddle.net/uj6n4oay/2

[Ankhena]

Alex_87,
мне не нужен код всего вашего сайта, просто воспроизведите проблему в песочнице.

[Alex_87]

Ankhena, Я вас очень ясно понял. Этот код я вам и привёл!

[Ankhena]

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

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

p.s.
Записи типа вот такой .header .wrapper .first .big-block #gamb ужасны. id и так один на странице, не смысла делать такую дикую вложенность у селектора. Да и вообще вложенность больше 2 это фу-фу-фу.

[Alex_87]

Ankhena, Дело в том, такая вложенность образовалась в результате обработки less файла.

[Alex_87]

Ankhena, jsfiddle.net/uj6n4oay/5
Расширьте окно браузера. Вы увидите два значка справа. Обратите внимание что их координаты не меняются. P.S. Иконки font-awesome здесь не видны!

[Ankhena]

Alex_87, да, их координаты относительно relative не меняются
jsfiddle.net/uj6n4oay/6

Дело в том, такая вложенность образовалась в результате обработки less файла

LESS не заставляет городить её ))))
В LESS это сделано для формирования необходимой вложенности, а не бездумного запихивания селектор в селектор. Либо для удобства собирания селекторов по методологиям типа БЭМ.

.block {
  стили
  &__elem {
    стили
  }
}

на выходе дает

.block {
  стили
}
.block__elem {
    стили
}

[Alex_87]

Ankhena, я не хочу с вами спорить относительно того, что делает less, лишь скажу, что если не работать по БЭМу, то иожно получить такую вложенность, как у меня! Но я вам задавал другой вопрос... На большом экране действительно работает так, как я вам сам и написал. Меня волнует, что на маленьком(здесь к сожалению не видно) но на маленьком, экране, когда пропадает list и появляется id gamb, слетает и этот эффект иконки. они перестают быть на равной удалённости от list. Я понимаю почему, list изменился... Но что мне делать?
P.S. Если вы запишите так

.block {
  стили
   .elem {
    стили
  }
}

то на выходе вы получите так:

.block {
  стили
}
.block .elem {
    стили
}

[Ankhena]

Alex_87,

Но что мне делать?

Я же написала, позиционировать не относительно list, а относительно, например, шапки.
Как-то так jsfiddle.net/uj6n4oay/8
Я закомментировала display:none в media, чтобы list остался виден, чтобы вы поняли суть при уменьшении окна.

Не нужно в media второй раз писать свойства, которые не изменяются, зачем браузеру 2 раза вычислять одно и тоже?

Есть еще интересный вопрос, объясните ваше затею, может, есть решение лучше.
По скринам в вопросе это лупа и корзина. И они по логике должны быть самостоятельными ссылками. Почему они тогда псевдо к списку меню?

я не хочу с вами спорить относительно того, что делает less, лишь скажу, что если не работать по БЭМу, то иожно получить такую вложенность, как у меня!

Арррр
Получить можно и не такое.
Не нужно писать такую вложенность, не в чистом css ни в less ни где-нибудь еще.
Не делайте так, не нужно. Двух уровней вложенности за редкими исключениями за глаза и за уши.
less это не повод говнокодить, как раз наоборот.

[Alex_87]

Ankhena, Вы большая умница!!! Спасибо вам большое!!! Я сегодня уже также пробовал к шапке position relative поставить, только очень стормозил и зачем поставил ему же эти before и after. И ничего у меня естественно не вышло! Вы очень наглядно всё расписали!!! Благодарю также за дельное замечание по поводу того, почему корзина и лупа не являются ссылками! Это действительно с моей стороны не логично! А дело всё в том, что я выполняю это для себя, в качестве тренировки. А потому, я начинаю нести отсебятину)) Наверное, мне очень захотелось потренироваться с ::before и ::after и потому моя хотелка затуманила логику)) ... Я с вами согласен и по поводу 3 замечания, только подскажите пожалуйста, как убрать эту сумасшедшую вложенность? Дело в том, что я не смотрю на css файл, потому что пишу на less. Сейчас, когда вы обратили моё внимание на этот бардак, я понял, что, что-то нужно менять... Предположим ситуацию, когда в html 5-6 вложенностей(ведь такое вполне может быть) И каждому уровню, нужно прописать какое-то правило. Тогда получается, что и в less файле, ты в любом случае, закладываешь их друг на друга. Что делать!?

[Ankhena]

Alex_87, :)

Дело в том, что я не смотрю на css файл

А браузер и другие любопытные смотрят. И вам имеет смысл взглянуть на него ))) Сильно удивиться и начать писать по другому.

Вас же никто не заставляет писать новые селекторы непременно внутри предыдущих.
Делайте вложенность только там, где она необходима.
Например, она может быть нужна для всех h1 или абзацев или списков внутри блока content, сам контент которого заполняет пользователь через CMS. Т.е. никаких классов он там сам не поставит.

Когда браузер видит .header .wrapper .first .big-block .list, он сначала найдет все блоки с классом list, потом пойдет проверять лежат ли они в .big-block или нет, потом лежит ли .big-block в .first и т.д.
Если блоков .list много, да, конечно, нужно указать кого-то из родителей. Но обычно, достаточно написать .header .list, а не всю родословную.
Если блок .list вообще один, то зачем вся эта история с поиском пра-пра-пра-бабушек...
andrew-r.ru/notes/css-selectors-matching

Вот еще прекрасная статья https://csswizardry.com/2012/11/code-smells-in-css/
Я не во всем с ней согласна, но некоторые моменты она хорошо проясняет в сознании

[Alex_87]

Ankhena, здесь же хочу у вас спросить, может быть вы знаете... Как правильно структурировать и ... какие основные правила CSS нужно применить, чтобы правильно реализовать подобный блок

Немного поясню, что имеется ввиду. То, что вы видите, имеется ввиду изображение, на самом деле, является слайдером, а нижние кнопки(в красной рамке) то, с помощью чего они меняются. Вопрос таков. Как сделать так, чтобы изображение менялось, а меню, текст оставались на своих местах?
P.S. Использую slick слайдер

[Ankhena]

Alex_87,
Если слайдер на js и меняются img, то всё, что статично делается абсолютом.
Если слайдер на css, то сначала скрытые input, за ними блок с фоном, в нем то, что не меняется, расположенное обычным способом. Фон меняется в зависимости от чекнутого инпута.
.input--1:checked + .block {}
Потом для второго и т.д.

Answer 1

[Юпитер Макс]

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

Comments

[Alex_87]

Вы не поняли! Нет проблем поставить их на какое-то из мест, забудьте про зелёный блок, я наверное зря об этом написал. Проблема в том, что не могу зафиксировать значок на определённой точки окна. Чтобы при уменьшение окна, эти координаты оставались такими же!