CSS3 실습 7-3

SMALL

고정 배치(fixed)

[Direction:]
Ÿ block #2 와 block #5는 고정 배치
Ÿ block #2는 top(0px), right(0px); block #5는 top(160px), left(100px)

<!DOCTYPE html>
<html>
    <head>
        <title>고정 배치</title>
        <style>
            div{
                display: block;
                background: plum;
                width: 200px; height: 60px;
                margin: 10px;
            }
            .two{
                position: fixed;
                top: 0px;
                right: 0px;
                background: skyblue;
                
            }
            .five{
                position: fixed;
                top: 160px;
                left: 100px;
                background: skyblue;
            }
        </style>
    </head>
    <body>
        <div>block#1</div>
        <div class="two">block#2
            <br>Best of Best!
            <br>최근 본 상품 리스트입니다.
        </div>
        <div>block#3</div>
        <div>block#4</div>
        <div class="five">block#5
            <br>이 상품은 반드시 사야 합니다.</div>
        <div>block#6</div>
        <div>block#7</div>
        <div>block#8</div>
        <div>block#9</div>
        <div>block#10</div>
        <div>block#11</div>
    </body>
</html>