CodeSolved

Solved Programming Questions & Exercises

Fixed box

Practice Easy 19/ Download 634 Views

Style the FIX class using CSS to constantly place in the lower left corner of the screen (10 pixels) and the position does not change if the user scrolls.

7 Answers

.fix {
    position: fixed;
    bottom: 10px;
    left: 10px;
    width: 5%;
    height: 5vw;
    margin: 0;
    background: black;}
Unun..ali..nunu Download 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 Download 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 Download 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; # Constant position
    bottom: 10px;    # The distance from the bottom
    left: 10px;      # The distance from the left
    background-color: rgba(0, 0, 0, 0.7); # Background color with transparency
    color: white;    # Text color
    padding: 10px;   # Internal distance
    border-radius: 5px; # Round corners
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); # Shade
}
User 136 Download HTML & CSS 
.fix {
    position: fixed; # Constant position
    bottom: 10px;    # Distance of 10 pixels from the bottom
    left: 10px;      # Distance of 10 pixels from the left
    background-color: rgba(0, 0, 0, 0.7); # Semi -transparent background
    color: white;    # White text color
    padding: 10px;   /* padding داخلی */
    border-radius: 5px; # Round corners
    z-index: 1000;   # Ensure that it is placed on top of other elements
}
Mma123 Download HTML & CSS 
<!DOCTYPE html>
<html>
  <head>
    <style>
      div.fix{
        position:fixed;
        bottom:10px;
        left:10px;
      }
    </style>
  </head>

  <body>
    <div class="fix">Hi Developers In CodeBezan!</div>
<p>Start</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><p>End</p>
  </body>
</html>
Rezanajafianez Download HTML & CSS

Submit answer

Submitting answers is currently unavailable.

Related content

Detection using AI
×

حساب کاربری

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

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

I can't solve this exercise 😞

If you don’t understand the exercise or can’t solve it for any reason, that’s completely normal—don’t worry 😊
Try checking out easier exercises and reviewing different answers submitted by others. Gradually, you can move on to more challenging exercises. Also, your answer might be correct even if it’s different from others.

Close