ruskar
@ruskar
Conflict Intelligence Team

Проблема с position:relative

Мало работал с position:relative, поэтому возникла проблема и прошу «помощи зала».

Есть контейнер div, имеющий класс route. Для него заданы только высота и отступы (margin). В примере (ниже) я ему ещё задал серый цвет границы.

Внутри него попеременно идут «кружок», «стрелка», «кружок», «стрелка». «Кружок» — это просто div, скруглённый до кружка через border-radius. «Стрелка» тоже находится в div'e. И «кружку», и «стрелке» заданы CSS-свойства:
.bubble, .arrow {
	position:relative;
	z-index:5;
	float:left;
}


После чего через CSS-свойства left они выравниваются друг относительно друга. Как мы помним, в случае position:relative, свойства top, left и т.д. начинают отсчитываться от того места, где эти элементы должны стоять. В результате кружки и стрелки становятся ровно так, как мне и нужно.

Теперь мне нужно под ними расположить чередующийся фон (тоже обычные div'ы), идущий от середины одного кружка, до середины другого кружка. Дописываю эти div'ы, задаю им CSS-свойства:
.interval {
	position:relative;
	z-index:3;
}


Свойство float сначала не задаю. В результате первый фон ложится ровно так, как мне надо:
1

Дописываю второй фон, он съезжает вниз:
2

В CSS-свойства div'а с фонами вношу на этот раз свойство float:
.interval {
	position:relative;
	z-index:3;
	float:left;
}


Теперь результат получается совсем странный, не понимаю почему div'ы с фоном именно так теперь располагаются:


Примечание: казалось бы, они просто теперь обтекают «кружки» и «стрелки», но, во-первых, они расположены на разных z-index, во-вторых, у «кружков» нулевые margin (т.е. фоны по идее тогда должны были вплотную к крайнему кружку стоять).

Для меня это тем более странно, что «кружки» и «стрелки» прописаны в вёрстке аналогично, свойства заданы идентичные, но выстраиваются они как надо, в отличие от фона. Почему фоны выстраиваются не так, как надо, что я упустил?

Для понимания, как я хочу чтобы в итоге выглядело:
4

Подскажите как исправить.

Весь HTML и CSS-код на JsFiddle.net
  • Вопрос задан
  • 4220 просмотров
Пригласить эксперта
Ответы на вопрос 7
Exwar
@Exwar
Как-то так: jsfiddle.net/exwar/xNNKh/64/
Ответ написан
Комментировать
Methos
@Methos
splitface
@splitface
Возможно нужно разместить элементы с float перед кружками и стрелками в html.
Ответ написан
Комментировать
@Defff
Добавьте общую обертку
      <div class="route">
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>
      <div class="intervalAll">
        <div class="interval"></div>
        <div class="interval" style="width:278px;border-color:green;background:#aaa"></div>
      </div>
      </div>

Для неё пропишите:
.intervalAll {
     position:absolute;
}

Образчик => hostjs-mybb2011.narod.ru/Buble.htm
Ответ написан
Комментировать
@Defff
Ps: Для корректной работы в ИЕ 6-7 правильнее перенести .interval вместе с оберткой в начало списка
      <div class="route">
      <div class="intervalAll">
        <div class="interval"></div>
        <div class="interval" style="width:278px;border-color:green;background:#aaa"></div>
      </div>
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>
        <div class="arrow">></div>
        <div class="bubble"></div>

      </div>
Ответ написан
Комментировать
@wdtime_ru
Тут ты найдешь всю информацию, с примерами, на тему свойства css position
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы