Можно ли установить элемент поверх родителя с такими параметрами?

Question

[cocomuffin]

Доброго времени суток!
Есть такие элементы:

<div class="mainBlock">
  <div class="nextBlock">
      <div class="wrapper">
        <div class="block"></div>
        <div class="hint"></div>
      </div>
      <div class="wrapper">
        <div class="block"></div>
        <div class="hint"></div>
      </div>
      <div class="wrapper">
        <div class="block"></div>
        <div class="hint"></div>
    </div>
  </div>
</div>

С такими параметрами:

.mainBlock {
  width: 330px;
  height: auto;
  border: 1px solid black;
  position: static;
  overflow: auto hidden;
}

.nextBlock {
  position: static;
}

.wrapper {
  position: relative;
}

.block {
  background: lightgreen;
  height: 60px;
  width: auto;
  margin: 10px;
  margin-bottom: 20px;
}

.hint {
  display: block;
  width: 175px;
  height: 40px;
  border: 1px solid gray;
  position: absolute;
  right: -20px;
  top: 20px;
  background: white;
  z-index: 9999;
}

К параметрам блока mainBlock доступа нет, изменить их нельзя. Менять можно только параметры его дочерних элементов. Необходимо, чтобы блок классов hint накладывался поверх mainBlock, но при текущих параметрах он находится в рамках mainBlock, а внутри самого блока mainBlock появляется скролл.



Можно ли как-то вывести блоки hint поверх mainBlock? При этом не используя position: fixed для блоков hint (т.к. каждый hint должен быть рядом со своим сестринским block)

JSFiddle

Comments

[shmatuan]

Можно используя position: absolute и js, но это будет намного сложнее)

[cocomuffin]

shmatuan, например, как? Что-то в голову пока приходит только дублирование содержимого контейнера и наложение сверху...

[shmatuan]

cocomuffin,
Тут просто вся проблема в right: -20px;
Если будет статично, то просто поставить right: 10px;
Если ширина будет менятся - проходить js, находить расстояние и делать right: n;

p.s. Я правильно понял, что нельзя сделать в виде <div class="block"> <div class="hint"></div></div> ?
просто если сделать так, то всё очень просто получается)

[cocomuffin]

shmatuan,

Тут просто вся проблема в right: -20px;

К сожалению, блоки hint должны именно выходить за границы блока mainBlock, т.е. в итоге должно выглядеть примерно вот так:

Я правильно понял, что нельзя сделать в виде ?
просто если сделать так, то всё очень просто получается)

Сделать можно, но что-то я все равно не пойму, как и что там установить, если все, что выходит за границы mainBlock, не накладывается поверх, а появляется скролл...

[shmatuan]

cocomuffin, Теперь понял задумку :D
Просто убрать overflow: auto hidden из .mainBlock

[cocomuffin]

shmatuan, вот туда как раз доступа нет :( В этом и есть вся моя печаль

На крайняк конечно можно программно через js поставить у mainBlock overflow: visible visible, тогда будет работать, но не факт, что не поломается все остальное. Поэтому сначала ищу менее деструктивные выходы.

[shmatuan]

cocomuffin, запутано то как :D
Тогда да, js)

[leni_m]

а что мешает переназначить параметр класса?

.mainBlock {
  overflow: visible visible;
}

[cocomuffin]

leni_m,

На крайняк конечно можно программно через js поставить у mainBlock overflow: visible visible, тогда будет работать, но не факт, что не поломается все остальное. Поэтому сначала ищу менее деструктивные выходы.

Но, впрочем, это не помогло. Только в фиддле отработало, как надо.