一个特定的班级应该显示 <div> 具有oveflow：隐藏属性

Question

I am having trouble creating a popup "CLOSE" text button . Popup Box have CSS property : overflow:scroll and position:absolute .

JS fiddle : http://jsfiddle.net/saifrahu28/qkfRr/

But I want to move the "CLOSE" text at the top left out side of the <div> . So that when scroll the "CLOSE" text Show remain at top left out side the div . May be this can be done having a Wrapper Div around that div BUT he main problem is can't use any wrapping that div . Is this possible to make ?

Place The CLOSE text at top left outside that div .

properties of the class can't be remove any But can be add if necessary . If need any jquery or java scripts No problem . But I am Stuck and I want a result to find .

Any help would be appreciated .

HTML

<div class="popup">
<p class="close">CLOSE</p>  
<p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem  Ipsum has been the industry's standard dummy text ever since the 1500s, 
    when an unknown printer took a galley of type and scrambled 
    it to make a type      specimen book. It has survived not only five centuries, 
    but also the leapinto electronic typesetting, remaining essentially
    unchanged. It was popularised in the 1960s with the release of Letraset 
    sheets containing Lorem Ipsum passages, and more 
    recently with desktop publishing software like Aldus PageMaker 
    including versions of Lorem Ipsum.

</p>
</div>

CSS

.popup{
height:100px;
overflow:scroll;
width:400px;
background:#fafafa;
margin-top:50px;
position:absolute;
}
.close{
  color:red;
}

Answer 1

You can do this with position: fixed

DEMO jsFiddle

.close{
   color:red;
    position:fixed;
    z-index:1000;
    top:10px;
    left: 0;
}

Answer 2

How about you reorganize your css, make only the content overflow hidden:

http://jsfiddle.net/qkfRr/1/

.popup{
    position:absolute;
}
.popup .content {
    height:100px;
    overflow:scroll;
    width:400px;
    background:#fafafa;
    margin-top:50px;
}