"Fix" a buton at the top of a "floating" div so that content scrolls under it.

[alxfyv]

I thought I posted this already but I don’t see it listed as one of my threads so I’m doing it again. If this is in fact a duplicate, please forgive me.

Using JavaScript, I dynamically create, populate, insert, and position a <div> that “floats” above the page at the (event.clientX, event.clientY) coordinates. The <div>‘s innerHTML structure is simple:

<div class="popup">
<button class="dismiss-popup-btn" ... ></button>
<img ... >
<p></p>
<p></p>
...
</div>

There is a Pen, Table Play, at CodePen. It is the popup that occurs when the instructor’s name is clicked that has the image.

I want the button and image to stay “fixed” in popup’s upper right and the text to scroll up underneath them.

I tried position: fixed for the button but that fixed the button relative to the view port, not to popup. The button stayed fixed in the view port and everything else scrolled under it.

I suppose this is something elementary, but I can’t determine what to do. Any help will be greatly appreciated by my fellows who are being deprived of my company while I’m fixed (fixated) on this problem. ;-)

-Steve

[Beverleyh]

Try putting position:relative; on .popup

Then you should be able to use position:absolute; (with additional top/right positioning) on both the img and the button, and position them relative to their .popup container.

Absolute positioning will take them out of the flow of everything else in the container so that the text scrolls up behind them. You might need to rethink the way the text wraps around the image though because you’ll lose that – maybe absolutely position their name/title alongside too to fill the space?

I notice that you already have position:absolute; on .popup though so you might have to introduce an inner wrapper to apply position:relative; to.

[alxfyv]

@Beverleyh

Thank you for your suggestion. I tried it with a div wrapper around the button, setting the wrapper to position: relative; and the button to position: absolute; but that did nothing to keep the button from scrolling up with the rest of the content.

There is a jsfiddle to experiment with.

Can you make any further suggestions?

[Chris Coyier]

You’d probably want to make the content inside the popup the thing that scrolls, and have the “X” just a block level element sitting inside the popup, not part of the scrolling stuff.

Like this:

http://codepen.io/chriscoyier/pen/xVvbJM?editors=0100

[alxfyv]

@ChrisCoyier

Ah! Wonderful. Thanks ever so much.

While I have you, may I impose with two questions?

How did you get the Pen to insert in your answer?

Could you help with my remaining problem? It's CSS Tricks topic Get a dynamically created div's top/bottom edge consistently to set as intended. If it's too much of an imposition, no problem, I understand. If not, you'll make my week.

Again, thanks. Your solution was spot on.

-Steve

[Author]

Posts