Контейнер HTML CSS со прокруткой переполнения, но с видимым переполнением одного элемента

#html #css

Вопрос:

У меня есть таблица, содержащая строки, где в каждой строке есть расширяемое меню с position: absolute правой стороны строки. У меня возникли проблемы с тем, чтобы заставить меню отображаться за пределами таблицы, учитывая, что таблица имеет overflow: scroll . Можно ли сделать так, чтобы меню было видно? Я пробовал различные варианты вложенных absolute и relative оберток вокруг меню, а также z-индекс, но безуспешно.

Мне нужно, чтобы результат выглядел так —

поиграй здесь на скрипке — https://jsfiddle.net/oet3mrjn/2/

 .container {
  height: 100px;
  width: 200px;
  border: 1px solid black;
  overflow: scroll;
}

.row {
  height:50px;
  position: relative;
}

.menu {
  position: absolute;
  background-color: white;
  top: 0;
  right:0;
  height: 300px;
  border: 1px solid red;
}

 <div class="container">
  <div class="row">
    row
    <div class="menu">
      menu
    </div>
  </div>
  <div class="row">
    row
  </div>
  <div class="row">
    row
  </div>
</div>

1. Я не понимаю вашего вопроса. Вам нужно, чтобы строка находилась внутри красного прямоугольника в меню?

2. Мне нужно, чтобы меню было видно за пределами границы таблицы, я обновил вопрос скриншотом того, чего я пытаюсь достичь. Я не уверен, что это возможно, но это разметка, с которой мне пришлось работать 🙁

Ответ №1:

Мне кажется, я вижу здесь вашу проблему.

Похоже, что причиной проблемы является ваше переполнение.

 .container {
  height: 100px;
  width: 200px;
  border: 1px solid black;

}

Взгляните на эту скрипку..

https://jsfiddle.net/0cz18fhL/

1. Пожалуйста, не публикуйте решение в скрипке. Опубликуйте это в рабочем фрагменте своего ответа.

2. спасибо, хотя это также приводит к переполнению строк. Похоже, мне нужна смесь того и другого overflow: scroll ради строк, но нужна overflow: visible ради меню…

3. Проверьте ответ выше @andymccullough

Ответ №2:

 .main {
  height: 100px;
  width: 200px;
  position: relative;
}

.container {
  height: 100%;
  width: 100%;
  border: 1px solid black;
  overflow: scroll;

  
}

.row {
  height: 50px;
}

.menu {
  position: absolute;
  right: 0;
  height: 300px;
  border: 1px solid red;
  background: white;
  /* right: 20px; */
  top: 0;
}

 <div class="main">
<div class="container">
  <div class="row">
    row
    <div class="menu">
      menu
    </div>
  </div>
  <div class="row">
    row
  </div>
  <div class="row">
    row
  </div>
</div>
</div>

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

2. Это не то, как выглядит ваше изображение, вам следует обновить свой вопрос, чтобы отразить это

3. итак, вы хотите, чтобы меню было складным по щелчку или просто выпадающим?

4. в первой строке вопроса говорится: «У меня есть таблица, содержащая строки, где в каждой строке есть расширяемое меню с позицией: абсолютная справа». Сворачивание-это не проблема, проблема в том, что меню не может переполнить таблицу. Меню в примере демонстрирует его в развернутом состоянии. Обычно это было бы скрыто за 3 точками меню / бургер