Question

我有3个div 在第一个div，我需要显示一个绝对的内部潜水，它将显示在剩余的潜水

之上

一切正常，但目前我添加

溢出-γ：滚动;

到父div，绝对div显示在第二个div下面而不是它上面
这是一个例子 http://jsfiddle.net/sV8cs/

有什么办法可以解决这个问题吗？所以即使父div有溢出-y：滚动我还能在它上面看到它吗？

这是我的代码

.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>

Answer 1

您可以使用overflow-y:scroll;为要显示的“文本”创建一个包装器结帐：http://jsfiddle.net/sV8cs/1/

我添加了div <div class="comments">。希望这有帮助！

Answer 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;
}

溢出-y的绝对div位置：滚动

2 个答案: