حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود

باکس ثابت

تمرین آسان 1409 visibility link download flag

با استفاده از CSS کلاس fix را استایل دهی کنید تا بصورت ثابت در گوشه پایین سمت چپ صفحه (با فاصله 10 پیکسل) قرار گیرد و در صورت اسکرول کاربر، موقعیت آن تغییر نکند.

reply 15

visibility 
.fix {
    position: fixed;
    bottom: 10px;
    left: 10px;
    width: 5%;
    height: 5vw;
    margin: 0;
    background: black;}
Unun..ali..nunu HTML & CSS 
<!DOCTYPE html>
<html dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"content="width=device.width, initial-scale=1.0">
  <title> باکس موقعیت ثابت</title>
  </head>
  <style>
    .fix {
    width: 200px;
    height: 200px;
    position: fixed; 
    bottom: 10px;   
    left: 10px;      
    background-color: rgba(189, 12, 12, 0.8); 
    padding: 10px;   
    border-radius: 5px; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
    z-index: 1000;   /
}
  </style>
<body>
  <div class="fix"></div>

</body>
</html>
Hadi.jalooli HTML & CSS 
<!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>
        div {
            width: 100px;
            height: 100px;
            background-color:darkgreen;
        }
        .fix{
            position: fixed;
            bottom: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="fix"></div>
</body>
</html>
Amirmh HTML & CSS 
<!DOCTYPE html>
<html lang="en";>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport " content="width=device-width,intial-scale=1.0">
        <title>fixed box</title>
        <style> 
.fix{
    position: fixed;
    bottom: 10px;
    left: 10px;
    width: 5%;
    height: 5vw;
    margin: 0;
    background: black;

        }
        </style>
    </head>
    <body>
  <div class="fix"></div>
    </body>
</html>
Maryam.n HTML & CSS 
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال CSS ثابت</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="content">
        <h1>محتوای صفحه</h1>
        <p>این یک متن آزمایشی است. برای مشاهده اثر اسکرول، به پایین صفحه بروید.</p>
        <div style="height: 1500px;"></div> <!-- برای ایجاد فضای اسکرول -->
    </div>
    <div class="fix">
        این یک عنصر ثابت در گوشه پایین سمت چپ است
    </div>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.content {
    padding: 20px;
}

.fix {
    position: fixed; /* موقعیت ثابت */
    bottom: 10px;    /* فاصله از پایین */
    left: 10px;      /* فاصله از چپ */
    background-color: rgba(0, 0, 0, 0.7); /* رنگ پس‌زمینه با شفافیت */
    color: white;    /* رنگ متن */
    padding: 10px;   /* فاصله داخلی */
    border-radius: 5px; /* گوشه‌های گرد */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* سایه */
}
User 136 HTML & CSS 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MOHAMMAD ALI MESBAH</title>
    <style>
      .fix {
        position: fixed;
        margin-left: 10px;
        font-size: 100px;
      }
    </style>
  </head>
  <body>
    <div class="fix">my box</div>
  </body>
</html>
M.a.mesbah HTML & CSS 
.fix {
    position: fixed;
    bottom: 10px;
    left: 10px;
}
پاسخ هوش مصنوعی Ai HTML & CSS 
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>باکس ثابت</title>
    <style>
    .fix {
        position: fixed;
        bottom: 10px;
        left: 10px;
        width: 5em;
        height: 5em;
        margin: 0;
        padding: 15px;
        text-align: center;
        background: rgb(82, 190, 190);
    }
    </style>
</head>
<body>
    <div class="fix">d</div>
</body>
</html>
F.sarli HTML & CSS 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Box</title>
  <style>
    div.fix{
      background-color: aqua;
      position: fixed;
      max-width: 200px;
      height: 100px;
      bottom: 10px;
      left: 10px;
      box-shadow: 0px 6px 7px #000000;
      padding: 20px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      text-align: center;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <div class="fix">Hello,This box wont move!!!</div>

</body>
</html>
Mhrshad.jfri HTML & CSS 
<!doctype html>
<html lang="fa-IR" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>باکس ثابت</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        min-height: 200vh;
        padding: 20px;
      }

      .fix {
        position: fixed;
        bottom: 10px;
        left: 10px;
        width: 80px;
        height: 80px;
        background-color: #050525;
      }
    </style>
  </head>
  <body>
    <p>اسکرول کن !</p>

    <div class="fix"></div>
  </body>
</html>
Komeil.moradi HTML & CSS
<< صفحه قبل 1 2 صفحه بعد >>

ارسال جواب

جوابت را با Markdown بنویس و ثبت کن

×

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
بستن