How do I apply the "position: fixed" style without ruining the website's appearance?

user_17750835 0
Viewed 37

I wanted the first container to be positioned in a fixed position when the scrollbar is opened. but when I apply position: fixed; in .one class style, the container below overlaps with the container above and the whole site looks distorted. How do I fix this problem?

<html>
<head>
  <meta charset="utf-8">
  <title>
      exp1
  </title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"></script>
  <style>
      .one{

          position: fixed;
      }
  </style>
</head>
<body style="height: 200%;">
  <div class="one">
      <h1>hello</h1>
  </div>
  
  <div>
      <h1>goodbye</h1>
  </div>
</body>
</html>

css html
1 Answers

When fixed is applied to the position style of an element, it is aimed that its position does not change when the scrollbar is opened. A margin-top style can be applied to the second container so that the second container does not overlap the first container.

<html>
<head>
    <meta charset="utf-8">
    <title>exp1</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"></script>
    <style>
      /* Apply the following style to open the scrollbar */
      html, body {
        height: 200%;
      }

      /* The first container has a black background color and the position style is fixed. */
      .one{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        border: 5px solid red;
        background-color: black;
        color: white;
      }
      
      /* The second container has a blue border and the margin-top style has been applied to avoid conflicts with the first container. */
      .two {
        margin-top: 100px;
        width: 100%;
        border: 5px solid blue;
      }
    </style>
</head>

<body>
    <!-- First Container -->
    <div class="one">
        <h1>hello</h1>
    </div>
    
    <!-- Second Container -->
    <div class="two">
        <h1>goodbye</h1>
    </div>
</body>
</html>

user_150326880
Related