Question

I want to disply the absolute div that overflows from the container.

Here is fiddle

Here are my requirements:

1. fixed div that overflows content.
2. overflow-y should be auto to scroll but not overflow-y
3. absolute div should be displayed.
4. page should not be scroll the only fixed position div should be scroll

And here are the problems I am having:

1. on putting overflow property for panel the absolute div is hiding.
2. and on remove of overflow property the panel not scrolling.

css

                    #panel {
                position: fixed;
                top: 0px;
                right: 20%;
                bottom: 0px;
                background: snow;
            }
            .contact {
                background: skyblue;
                position: relative;
                height:50px;
            }
            .std {
                width: 80px;
            }
            .vtl {
                position: absolute;
                background: red;
                display: none;
                left:-153px;
                margin-top:-35px;
                width: 150px;
                height: 50px;
            }
            .vtl:after {
                content: ' ';
                height: 0;
                position: absolute;
                width: 0;
                border: 10px solid transparent;
                border-left-color: red;
                left: 100%;
                top: 10px;
            }
            .contact:hover .vtl {
                display: block;
            }

html

<div id="panel">
            <div class="contact">
                <div class="std">
                    Hover me!
                </div>
                <div class="vtl">
                    tools
                </div>
            </div>
            <div class="contact">
                <div class="std">
                    Hover me!
                </div>
                <div class="vtl">
                    tools
                </div>
            </div>
            <div class="contact">
                <div class="std">
                    Hover me!
                </div>
                <div class="vtl">
                    tools
                </div>
            </div>


                    ......

                </div>

Answer 1

Because <div class="std"> is contained within the <div id="panel"> which has a fixed position, you will need to expand the width of #panel in order to display the content within the <div class="std">. For example:

HTML

<div id="panel">
  <div class="contact">
    <div class="std">
     Hover me!
    </div>
    <div class="vtl">
     tools
    </div>
  </div>
</div>

CSS

#panel {
  position: fixed;
  top: 0px;
  right: 20%;
  bottom: 0px;
  background: snow;
  width:260px;
  overflow: auto;
}
.contact {
  background: skyblue;
  position: relative;
  height:50px;
}
.std {
  width: 80px;
  float:right;
}
.vtl {
  position: absolute;
  background: red;
  display: none;
  width: 150px;
  margin-left:10px;
  margin-top:-10px;   
  height: 50px;
}
.vtl:after {
  content: ' ';
  height: 0;
  position: absolute;
  width: 0;
  border: 10px solid transparent;
  border-left-color: red;
  left: 100%;
  top: 10px;
}
.contact:hover .vtl {
  display: block;
}​

Here’s a working example: http://jsfiddle.net/pZQrA/