Absolute/fixed element in scrollable popup div

Question

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

Answer 1

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>

Answer 2

So, what's going on here is that A) You're not actually setting anything pertinent to the actual position of the elements, B) What you are setting is incorrect, and C) you're putting the close element inside the scrollable area...which..is...why it scrolls.

But don't worry! We can fix that! jsfiddle

MARKUP

<div class="outer">
    <div class="close">X</div>
    <div class="relative">
        <div class="inner">
            <li>test</li>
            <li>test</li>
            ...
            <li>test</li>
        </div>
    </div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background: url('http://www.catster.com/files/original.jpg');
}
.outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 90%;
    height: 90%;
    margin: 5%;
    background: rgba(255,255,255,0.75);
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.relative {
    position: relative;
    width: 100%;
    height: 95%;
    top: 5%;
    left: 0;
}
.inner {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

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

So what's actually going on here?

First, we move the .close element outside of the scrollable area so that is can position itself properly inside the modal. That gets us a little closer, but we've still got soeme nasty div collapse issues to worry about.

Well...I say nasty, but I mean expected--well...I say expected but I mean annoying...

Anytime you position/float elements inside of a parent, it collapses that parent. This include the <html> and <body> elements. SO, what we first have to do is un-collapse them by giving them a defined size. We want them to be the same size as the window, so setting them to 100% height and width does the trick.

Now we have a reference point by which to position other elements. The modal is set to fixed so it positions relative to the window. We set widths and margins by % because that's the cool way to do it.

Then, we have the main container for our modal content set to relative so that any children of this element will fix themselves according to it's position. We tell said children where to go by setting them to absolute and giving them coordinates.

Set up the overflows, set widths, give <body> a good cat pic background and BADA-BOOM-BA! One slick little CSS styled modal window at your service.

ALLONS-Y!