Skip to content
This repository
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 72 lines (55 sloc) 1.544 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
<!DOCTYPE html>

<html>
<head>
    <title>Testing position:fixed</title>

    <style>

        html { -pie-load-path: "../build"; }

        #forceScroll {
            height: 10000px;
            background: url(background1.gif)
        }


        .fixed {
            position: fixed;
            top: 100px;
            background: #EEE;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            -webkit-box-shadow: #000 0 0 20px;
            -moz-box-shadow: #000 0 0 20px;
            box-shadow: #000 0 0 20px;
            padding: 20px;
            width: 60px;
            border: 1px solid;
            behavior: url(../build/PIE.htc);
        }

        #test1 {
            left: 20px;
        }

        #test2Cont {
            position: absolute;
            border: 1px solid red;
            top: 300px;
            left: 10px;
            background: #FFF;
        }
        #test2 {
            left: 160px;
        }

        #test3 {
            right: 100px;
        }

    </style>
</head>
<body>

    <p>This document tests position:fixed. The rounded boxes should stay in place when scrolling.
       This won't work in IE6 of course as it does not support position:fixed.</p>

    <div id="forceScroll"></div>

    <div class="fixed" id="test1">Child of body</div>

    <div id="test2Cont">
        Container
        <div class="fixed" id="test2">Child of container</div>
    </div>

    <div class="fixed" id="test3">From right</div>


</body>
</html>
Something went wrong with that request. Please try again.