Sticky in html-css

سوال

سلام به همه مهندسای عزیز کسی اینجا هست که بتونه این مشکل منو حل کنه میخوام یه صفحه ایی طراحی کنم که توش یه باکس قرمز رنگ به قسمت راست پایین صفحه بچسبه و درحالت اسکرول هم جاش تغییری نکنه.عکسش هم تو ضمیمه هست. خیلییی ممنونم ازتون اگه جوابمو بدین


ضمیمه ها
حل شده 1
golsa Mohammadi 4 ماه 3 پاسخ ها 81 دیده شده 1

پاسخ ها ( ۳ )

  1. بهترین پاسخ
  2. ۱
    ۲
    ۳
    ۴
    ۵
    ۶
    ۷
    ۸
    ۹
    ۱۰
    ۱۱
    ۱۲
    ۱۳
    ۱۴
    ۱۵
    ۱۶
    ۱۷
    ۱۸
    ۱۹
    ۲۰
    ۲۱
    ۲۲
    ۲۳
    ۲۴
    ۲۵
    ۲۶
    ۲۷
    ۲۸
    ۲۹
    ۳۰
    ۳۱
    ۳۲
    ۳۳
    ۳۴
    ۳۵
    ۳۶
    ۳۷
    ۳۸
    ۳۹
    ۴۰

    <!DOCTYPE html>
    <html lang=”en”>

    <head>
        <meta charset=”UTF-8″>
        <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
        <title>Darsman</title>
        <style>
            body {
                margin: 0px;
            }

            div:nth-child(1) {
                position: sticky;
                top: 547px;
                left: 89%;
                background-color: brown;
                width: 150px;
                height: 190px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                border: 1px solid white;
            }

            div:nth-child(2) {
                margin-top: -190px;
                height: 2000px;
                background-color: slateblue;
            }
        </style>
    </head>

    <body>
        <div>قرمز</div>
        <div></div>
    </body>

    </html>

ارسال یک پاسخ