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.

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.

• javascript
• jquery
• css
• css-float

Share Follow edited Dec 24, 2011 at 18:04 Wex 15.7k1010 gold badges6767 silver badges107107 bronze badges asked Dec 23, 2011 at 21:21 QuillionQuillion 6,4861212 gold badges6464 silver badges9999 bronze badges 3

• You should probably add a javascript tag because this certainly cannot be done in just CSS. – Wex Commented Dec 23, 2011 at 21:28
• Okay, you want the element at the top left of its container initially, but then when you start scrolling, you want to fix it to the top left of the screen? – Purag Commented Dec 23, 2011 at 21:29
• @Purmou I want it to stay fixed at top left within container. I pretty much want something like this papermashup. only within a certain div tag. – Quillion Commented Dec 23, 2011 at 21:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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./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

Here is a Fiddle http://jsfiddle/TSfLu/

The Top left Message would always be at that position and cover anything below it. So you might want to position the content on your page accordingly.