position:fixed overflowing parent

Question

Any help would be much appreciated.

Below is a simplified code snippet. The issue I’m having is the “logo” class is positioned exactly as I would want it to be, that is relative to the entire page/window. So as I scroll down the page the “logo” elements move down the page within the parent element.

The issue is that despite the fact the “logo” element is a child of the “page” element the “logo” is always visible even when outside of the parent’s bounds despite the setting the parents “overflow” to “hidden”.

If anyone knows how to rectify the issue with CSS that would be fantastic and preferred. jQuery (JavaScript) is also an option though I would prefer to steer away from this if I can as I’m very aware the site is going to be very JavaScript heavy once complete.

<style>
.page{
    width:100%;
    height:1000px;
    overflow:hidden;
}
.logo{
    position:fixed;
    margin:20px;
}
</style>

<div class="page">
    <div class="logo"></div>
<div>
<div class="page">
    <div class="logo"></div>
<div>

Fixed is based on the window. It has nothing to do with parent/child. — Leeish, Jan 17 '13 at 15:47

score 2 · Answer 1 · edited May 23 '17 at 12:03

2

Cannot be done. Taken from here:

Because a fixed position element is fixed with respect to the viewport, not another element. Therefore since the viewport isn't cutting it off, the overflow becomes irrelevant.

As requested, entirely theoretical possible jQuery solution:

$(window).scroll(function(){
    if($(this).scrollTop()>=1000){
        $('#ItemToHide').hide();
    } else {
        $('#ItemToHide').show();
    }
});

This is super sloppy, obviously can be improved, but something like this might work.

edited May 23 '17 at 12:03

Community

1
1

answered Jan 17 '13 at 15:50

PlantTheIdea

16,061
5
35
40

Though it is positioned correctly it’s a shame its doesn’t take its parents overflow css into account, much appreciated. Don’t suppose you are aware of a jQuery method that will make it work? – Adam Jan 17 '13 at 15:59
the only thing that comes to mind is using scrollTop to identify how far down you are, binded to the .scroll() event. When the top of the window reaches a specific point, hide the element. – PlantTheIdea Jan 17 '13 at 16:00

score 1 · Answer 2 · answered Jan 17 '13 at 15:48

1

You probably want absolute positioning. An absolute positioned element is based on its parent element. So logo absolute position with top: 20px will place it 20 pixels from the top of the page element. Fixed with a top of 20px places it 20px from the top of the window. However for absolute positioning to work, your page element will need a position of at least relative.

http://www.w3schools.com/css/css_positioning.asp

answered Jan 17 '13 at 15:48

Leeish

5,203
2
17
45

1

My apologies having read the post again It’s not very clear, but I don’t want the logos positioned relative to the parent elements I need then to be fixed to the window instead. – Adam Jan 17 '13 at 15:55
Then the answer below is correct. Fixed position elements have no regard to their parents. A jQuery solution, perhaps the one below might work. – Leeish Jan 17 '13 at 16:22

position:fixed overflowing parent

2 Answers2