Блог

Главная - Вопросы по программированию - абсолютная позиция div с переполнением-y: прокрутка

абсолютная позиция div с переполнением-y: прокрутка

#html #css

#HTML #css

Вопрос:

У меня есть 3 div в первом div, мне нужно отобразить абсолютное внутреннее погружение, которое будет отображаться над остальными погружениями

вот пример http://jsfiddle.net/b3PXF /

все работает нормально, но в тот момент, когда я добавляю

переполнение-y: прокрутка;

для родительского div абсолютный div отображается под вторым div, а не над ним
вот пример http://jsfiddle.net/sV8cs /

есть ли что-то, что можно сделать для решения этой проблемы? так что, даже если родительский div имеет overflow-y: scroll, я все равно вижу его над ним?

вот мой код

 .left{
    float:left;
}
.panel{
    width:300px;
    height:250px;
    border:1px solid red;
    background-color:#fff;
    overflow-y:scroll;
}
.icon_but{
    width:50px;
    height:50px;
    border:1px solid red;
}
.comment_wrapper{
    position:relative;
}
.comment_body{
    position:absolute;
    top:0px;
    left:0px;
    z-index:999;
    width:400px;
    height:100px;
    border:1px solid  #c5c5c5;
    background-color:gray;
}

HTML:

 <div class="panel left">
  <div class="comment_wrapper">
    <div class="icon_but">click me</div>
    <div class="comment_body">hi I am the comment</div>
  </div>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>
<div class="panel left"> div2 </div>
<div class="panel left"> div3 </div>

Комментарии:

1. Никаких изменений вообще нет! Чего именно вы ожидаете?

2. Div находится в абсолютном положении. Это означает, что он будет расположен относительно его ближайшего относительно позиционированного родителя. И, следовательно, когда вы явно применяете an overflow , он содержится внутри родительского элемента. Вы могли бы использовать контейнер / оболочку, а затем расположить ее по отношению к нему.

3. изменение между состояниями заключается в том, что в первом абсолютный div находится над второй панелью jsfiddle.net/b3PXF но когда я добавляю в родительскую панель css-свойство overflow-y, оно отображается под ним jsfiddle.net/sV8cs

4. Пожалуйста, прочтите мой второй комментарий. Вам нужна обертка div.

5. хорошо, теперь я понял корень проблемы, спасибо, это помогло мне

Ответ №1:

Вы могли бы создать оболочку для «текста», который вы хотите отобразить с overflow-y:scroll;
 помощью Checkout: http://jsfiddle.net/sV8cs/1 /

Я добавил div <div class="comments"> . Надеюсь, это поможет!

Ответ №2:

 <div class="panel left">

    <div class="comment_wrapper">
        <div class="icon_but">click me</div>
        <div class="comment_body">hi I am the comment</div>
    </div>
    <div class="comment-text">
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p> 
    </div>
</div>
<div class="panel left">
div2
</div>
<div class="panel left">
div3
</div>

.comment-text{
    height: 100%;
    overflow-y:scroll;
}