Question

I created a div that is always on top

.visibleDiv, #topLeft
{
    position: fixed;
    width: 150px;
    border: solid 1px #e1e1e1;
    vertical-align: middle;
    background: #ffdab9;
    text-align: center;
}

#topLeft
{
    top: 10px;
    left: 10px;
}

And I display it like so

<div id="topLeft">
    Top Left
</div>

But I also have a div called container. And i would like topLeft to stay at the top left within that container instead of the top left of the screen. I am quite new to css and have been scratching my head for a while on how to achieve such an effect.

So to explain more clearly I would like to try to achieve this effect

______________
|Other things|
|____________|
________________________________
| TOP LEFT MESSAGE|            |
|_________________|            |
|                              |
|                              |
|         CONTAINER DIV        |
|                              |
|                              |

And when you scroll down I want the topleft to be at top left of screen within container tab like so

|__________________            |
| TOP LEFT MESSAGE|            |
|_________________|            |
|                              |
|                              |
|         CONTAINER DIV        |
|                              |
|                              |
|______________________________|

If anyone could point me in right direction or show me how to achieve that with an explanation I would be really grateful. Thank you to anyone in advance for helping or just reading this post.

Answer 1

Simply add position:relative to your container element.

See this fiddle

Update

jQuery is very useful here. You can use it to easily calculate when the “container” hits this top of the view port then re-assign a class to your “topLeft” element to fix it.

HTML

<div class="head">
Some Stuff
</div>
<div class="container">
    <div id="topLeft">Top Left Stuff</div>
    Container Stuff
</div>

CSS

.container
{

    background-color:#FAA;
    height:1000px;
}

#topLeft
{
    width: 150px;
    border: solid 1px #e1e1e1;
    vertical-align: middle;
    background: #ffdab9;
    text-align: center;
}

.fixit
{
    position:fixed;

    top: 0px;
}

Javascript

<!-- Include jQuery Library -->
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<!-- Wire Up Our Magic -->
<script type='text/javascript'>
$(window).load(function(){
$(window).scroll(function () { 
    if(($(".container").position().top - $(window).scrollTop()) <= 0)
       {
           $("#topLeft").addClass("fixit");
       }
       else
       {
           $("#topLeft").removeClass("fixit");
       }

    });
});

</script>

See it in action here