sticky-both-sides-bottom-right-constrained.html

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        margin: 0;
        width: 5000px;
        overflow: hidden; /* hide scrollbars */
    }

    .container {
        position: absolute;
        outline: 2px solid black;
    }

    .horizontal {
        width: 5000px;
        height: 180px;
        top: 100px;
    }

    .vertical {
        top: 0px;
        left: 100px;
        width: 180px;
        height: 5000px;
    }

    .sticky {
        position: sticky;
        opacity: 0.75;
    }

    .horizontal .sticky {
        width: 300px;
        height: 180px;
        left: 50px;
        right: 50px;
        background-color: green;
    }

    .vertical .sticky {
        width: 180px;
        height: 300px;
        top: 50px;
        bottom: 50px;
        background-color: blue;
    }
    .space {
        background-color: grey;
        opacity: 0.1;
    }
    .horizontal .space {
        width: 2000px;
        height: 100%;
    }
    .vertical .space {
        width: 100%;
        height: 2000px;
    }
    .inline {
    display: inline-block;
    }
</style>
</head>
<body>
    <div class="horizontal container">
        <div class="space inline"></div>
        <div class="sticky inline"></div>
    </div>
    <div class="vertical container">
        <div class="space"></div>
        <div class="sticky"></div>
    </div>
</body>
</html>
chromium/third_party/blink/web_tests/fast/css/sticky/sticky-both-sides-bottom-right-constrained.html
