CODEWITHSUNDEEP
htmlcss
Mark
Mark

Reputation: 4970

Fixed position and scrolling

I am using the following code in order to scroll middle part and keep upper part still visible:

<body style="overflow:auto">
  <div class="table-layout" style="position:fixed;z-index:10000">
        <div class="table-cell fixed-width-200" main-screen-title>
        </div>
        <div class="table-cell fixed-width-200">
        </div>
        <div style="height:50px;border-bottom:solid;border-width:1px;width:90%;">
        </div>
    </div>
    <div ui-view style="margin-top:50px;width:99%;height:94%;top:50px;z-index:-1"></div>
</body>

CSS

<style>
.table-layout {
    display: table;
    width: 100%;
}

    .table-layout .table-cell {
        display: table-cell;
        vertical-align:middle;
    }

.fixed-width-200 {
    width: 200px;
}

When I load content into ui-view everything looks right. After resizing the Browser and scrolling down the content will be covering area above it while I want the illusion that it goes under. Any idea what is wrong with my code?

Thanks

Upvotes: 0

Views: 43

Answers (1)

slasky
slasky

Reputation: 3086

Your topmost div is transparent. Give it color by adding

background-color: #fff;

to the .table-layout class and the scrolling part will appear beneath it.

Upvotes: 2

Related Questions