CODEWITHSUNDEEP
htmlcss
justinae
justinae

Reputation: 387

Possible to fix an element to top inside an absolute positioned div?

I have a page with pop up overlays in different parts of the page. Each overlay has a close button that I want to stay at the top.

The problem I'm having is that the overlays are positioned absolute (otherwise they're not relative to their parent) and when i try to position the close button as fixed it "fixes" to the whole page, not from within the overlay.

Parent (position: relative) Overlay: (position: absolute) Closer button: (position: ???)

I didn't paste all the code because it's long and it seems like this could be solved without it.

thanks!

EDIT: The goal is to have the closer stay at the top even when scrolling. Sorry I wasn't very clear about that.

Upvotes: 0

Views: 633

Answers (1)

Fenton
Fenton

Reputation: 250812

Assuming you have HTML "a bit like this".

<div class="A">
    <div class="B">
        <div class="C">X</div>
    </div>
</div>

You can use position: absolute on the innermost div.

.A {
    position: relative;
    top: 20px;
    border: 1px solid blue;
}

.B {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100px;
    height: 100px;
    background-color: Aqua;
}

.C {
    position: absolute;
    top: 0;
    right: 0;
}

See it running here: http://jsfiddle.net/9Lb5U/

Upvotes: 1

Related Questions