CODEWITHSUNDEEP
htmlcsscross-browser
fishang
fishang

Reputation: 3

Relative parent with overflow: hidden, fixed child does not obey

I am trying to create a relative-positioned element with overflow:hidden that contains a few fixed-position elements. The goal is to have the fixed child elements become hidden as the parent element moves, sort of like if they were part of a background-image with attachment:fixed on the parent element.

By all accounts on StackOverflow and elsewhere on the web, this is not possible, because a fixed element only regards the browser window and ignores its parent element. However, for whatever reason it actually works as intended in Chrome only: http://jsfiddle.net/x6avvhuf/

Here's what the fiddle looks like, view it in Chrome vs. IE/Firefox to see the difference:

HTML

<body>
<div id = "headwrapper">
    I am the relative parent element
    <div class = "fixedchild">
        I am a fixed child element
    </div>
</div>
<div id = "content">
    This is the main content portion of the page<br>
    <!-- Repeat until the page scrolls -->
    This is the main content portion of the page<br>
</div>

CSS

body {
   background-color: yellow;
}

#headwrapper {
    position: relative;
    height: 300px;
    width: 100%;
    overflow: hidden;
    z-index: -1;
    background-color: black;
    color: white;
    text-align: center;
}

.fixedchild {
    position: fixed;
    width: 75%;
    height: 40px;
    z-index: 48;
    top: 22.5%;
    left: 50%;
    margin: 0 0 0 -37.5%;
    text-align: center;
    color: red;
    background-color: pink;
}

What is an alternative solution for this? I have read that it is possible to make an absolute element behave like a fixed element with CSS, but I have been unable to make this work so far. Thanks in advance for any help or advice! :)

Upvotes: 0

Views: 4064

Answers (1)

jmore009
jmore009

Reputation: 12923

UPDATE

Sometimes the best solutions are the most simple. Given the code you posted all you would have to do is set a background-color on #content (ex: yellow in this instance to match the body) since your fixed element has z-index: -1 and will sit behind it anyways:

#content{
   background: yellow;
   width: 100%;
}

CSS EXAMPLE 1

OR

You could set #content to position:relative which would allow you to order this and your fixed div with z-index (this is probably better, using z-index: -1 is kind of a hack):

CSS

.fixedchild {
   position: fixed;  
   width: 75%;
   height: 40px;
   z-index: 1; //set to 1
   top: 22.5%;
   left: 50%;
   margin: 0 0 0 -37.5%;
   text-align: center;
   color: red;
   background-color: pink;
}

#content{
   background: yellow;
   width: 100%;
   position: relative; //add
   z-index: 2; //set higher
}

CSS EXAMPLE 2

(previous answer):

DISCLAMIER: This is not a CSS solution.

There may be a CSS solution for this. I don't happen to know one off the top of my head, but I do know this can be done pretty easily with Jquery

JS

$(window).scroll(function(){
   var scrolled = $(this).scrollTop()+100; //offset starting position which I hard coded to top: 100px - you can change as needed
   $(".fixedchild").css({"top": scrolled+"px"});  
});

CSS

.fixedchild {
   position: absolute;
   width: 75%;
   height: 40px;
   z-index: 48;
   top: 100px;
   left: 50%;
   margin: 0 0 0 -37.5%;
   text-align: center;
   color: red;
   background-color: pink;
}

JS EXAMPLE

Upvotes: 3

Related Questions