Sticky in html-css

Question

Sticky in html-css

سوال

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

ضمیمه ها

حل شده 1

HTML-CSS golsa Mohammadi 4 سال 3 پاسخ ها 360 دیده شده 1

درباره golsa Mohammadi

دانشجوی مهندسی کامپیوتر دانشگاه تبریز

پاسخ ها ( ۳ )

fatemeh-

5

۱۳۹۹-۰۲-۱۷ در ۱۱:۰۷

پاسخ دادن

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</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: red;
        }
    </style>
</head>
 
<body>
    <div></div>
    <div></div>
</body>
 
</html>

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

<!DOCTYPE html>

<head>

<title>document</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: red;

}

</style>

</head>

<body>

</body>

</html>

Maryam

1

۱۳۹۹-۰۲-۱۹ در ۱۸:۳۰

پاسخ دادن

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰

<!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>

</html>

ارسال یک پاسخ

سوال قبلی

سوال بعدی

فاطمه گلشنی پایدار · Accepted Answer · ۱۳۹۹-۰۲-۰۷

<!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>

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

<!DOCTYPE html>

<head>

<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>

</body>

</html>