CodeSolved

Solved Programming Questions & Exercises

Fixed box

Practice Easy Download

772 Views

Front-End

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.

8 Answers

.fix {
    position: fixed;
    bottom: 10px;
    left: 10px;
    width: 5%;
    height: 5vw;
    margin: 0;
    background: black;}

Unun..ali..nunu

U

Download

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

H

Download

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

M

Download

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

1

Download

<!DOCTYPE html>
<html>
  <head>
    <title>MyFiles</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,  initial_scale=1.0">
  <style>
    .fix {
      border: 2px solid red;
      width: 200px;
      height: 70px;
      color:white;
      background-color: black;
      padding: 12px;
      position: fixed;
      bottom: 10px;
      left: 10px;
      background-color: #333;
      color: white;
      padding: 10px;
    }

    .text {
      text-align: right; 
      padding-right: 20px;
      color: rgb(141, 7, 70);
    }

  </style>
  </head>
  <body>
    <div class="fix">Hello!<br>
      Welcom To The This WebSite.
    </div>
    <div class="text">
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
      <p>......................................</p>
    </div>
  </body>
</html>

Tavanalizadeh.89

T

Download

.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

M

Download

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

Programmer

P

Download

.fix{
   pisition: fixed;
   left: 10px;
   bottom: 10px;
}

Shahroozchegini

S

Download

Submit answer

Submitting answers is currently unavailable.

Related content

Detection using AI

×

Close