Переполнение CSS-y: видимое, переполнение-x: прокрутка

Я видел несколько таких вопросов в моем поиске, но ни на вопрос не ответил должным образом, ни ответа не было. Итак, я попрошу еще раз.

<style>
.parent { overflow-y:scroll; overflow-x:visible; width:100px; }
.child { position:relative; }
.child-menu { position:absolute; top:0px; left:-100px; display:inline-block; }
</style>

  <div class="parent">
  <!-- Lots of the following divs -->
  <div class="child">
    Text Line
    <div class="child-menu">some pop out stuff</div>
  </div>
</div>

Хорошо, это просто пример. Но в основном, то, что я пытаюсь выполнить, это сделать классы .child прокручиваемыми по оси y... прокручивать вверх и вниз. Но я хочу ось x.... дочернее меню должно быть видимым вне контейнера .parent.

Это имеет смысл? Итак, что происходит, так это то, что когда страница отображается, браузер интерпретирует переполнение как авто в целом и не уважает отдельную ось. Я что-то делаю неправильно, или браузеры просто не соответствуют спецификации CSS3? Чаще всего тестируется только в Chrome. enter image description here

Ответы

Ответ 1

Я понял это!

Родитель должен быть переполнен: auto; Файл .child должен быть позиционным: относительный; Меню .child должно быть фиксированным; с NO верхним или левым позиционированием. Если вы сделаете это, он сохранит его в соответствии с контентом.

Если вам нужно переместить дочерние меню, используйте поля, а не верх или левую. Пример margin-left: -100px;