CSS overflow-y: видимый, overflow-x: прокрутка

Question

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

<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 ... прокручивать вверх и вниз.Но я хочу, чтобы ось х ... дочернее меню было видно за пределами родительского контейнера.

Имеет ли это смысл?Таким образом, происходит то, что при отображении страницы браузер интерпретирует переполнение как полностью автоматическое и не учитывает отдельную ось.Я что-то не так делаю или браузеры просто не соответствуют спецификации CSS3?В основном тестируется только на Chrome.

Answer 1

Я понял это!

Родитель должен быть переполнен: auto; .Child должен быть положительным: относительный; .Child-меню должно быть position: fixed; с NO верхним или левым позиционированием. Если вы сделаете это, оно будет соответствовать содержанию.

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

EDIT

Поскольку кажется, что люди все еще используют это, обратите внимание, что вам придется использовать javascript для перемещения фиксированных элементов при прокрутке страницы.

Answer 2

Это решено здесь!Они используют CSS и JS.

.child:hover .child-menu { display: block; }

 .parent { overflow-y:auto; overflow-x:hidden; width:100px; height:150px  }
    .child { position:static; }
    .child-menu { position:absolute; display:inline-block; display: none; }

https://css -tricks.com / popping-hidden-overflow /

https://jsfiddle.net/68fBE/2/