Всегда на вершине div в пределах области

Question

Я создал div, который всегда сверху

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

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

И я показываю это так

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

Но у меня также есть div, называемый контейнером. И я бы хотел, чтобы topLeft оставался в левом верхнем углу этого контейнера, а не в верхнем левом углу экрана. Я новичок в css и некоторое время чесал голову о том, как добиться такого эффекта.

Чтобы объяснить более четко, я хотел бы попытаться достичь этого эффекта

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

И когда вы прокрутите вниз, я хочу, чтобы верхний левый угол находился в левом верхнем углу экрана на вкладке контейнера, например, так:

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

Если бы кто-нибудь мог указать мне правильное направление или показать мне, как этого добиться с объяснением, я был бы очень благодарен. Спасибо всем заранее за помощь или просто чтение этого поста.

Answer 1

Просто добавьте позицию: относительно вашего элемента контейнера.

См. Это Скрипка

Обновление

jQuery очень полезен здесь.Вы можете использовать его, чтобы легко вычислить, когда «контейнер» достигнет этой вершины порта представления, а затем переназначить класс для вашего элемента «topLeft», чтобы исправить это.

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>

Посмотреть в действии здесь

Answer 2

Вот скрипка http://jsfiddle.net/TSfLu/

Верхнее левое сообщение всегда будет в этой позиции и будет закрывать все, что ниже.Так что вы можете разместить контент на своей странице соответствующим образом.