Q:

Absolute/fixed element in scrollable popup div

I'm having a button that will show popup box after clicking on it. Popup will need to be positioned either absolute or fixed, not to interfere with the content of the website (in case someone writes position of the parent has to be relative).
Within popup I have a list, that will be scrollable if won't fit within box boundaries.
In the right top conrer I want to have a 'close' button that will remain sticked to the corner of the box regardless the scrolling. Unfortunatelly it doesn't, it scrolls together with the content.
HTML:
<div class="outer">
    <div class="relative">
        <div class="close">X</div>
        <div class="inner">
            <li>test</li>
            (...)
            <li>test</li>
        </div>
    </div>
</div>

CSS:
.outer {
    position: absolute;
    width: 98%;
}

.relative {
    position: relative;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
}

As you can see I tried to trick it and add additional div with position:relative to get 'X' button to work as intended, but that didn't do the trick.
Any ideas how can I get it to work? I know I can use jQuery and give the 'X' button position: fixed coordinates based on popup offset, but I was hoping for pure CSS soultion.
Here's jsFiddle

A:

with height auto i dont think it is possible instead you can give fixed height and try or if you want to give height 100% of browser you an use jquery or javascript 
demo - http://jsfiddle.net/84cyupb0/1/

.outer {
  position: absolute;
  width: 98%;
  border: 1px solid red;
}
.relative {
  position: relative;
}
.inner {
  height: 200px;
  overflow-y: scroll;
}
.close {
  position: absolute;
  top: 10px;
  right: 10px;
}
<div class="outer">
  <div class="relative">
    <div class="close">X</div>
    <div class="inner">
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </div>
  </div>
</div>

