Bootstrap 5位置固定顶部

Bootstrap 5 Position Fixed top是用来将元素的位置设置在视口的顶部。我们可以使用一些CSS属性来显示固定顶部位置的效果。

Position Fixed Top Class:

fixed-top: 该类用于将元素的位置设置为视口的顶部。

语法:

<div class="fixed-top">
    Content
</div>

例子1：在这个例子中，我们将创建一个固定宽度和高度的div元素，并将其位置设置为固定的顶部。

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Position Fixed top</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
      </script>
    <style>
        .container {
            margin-top: 150px;
        }
        .box {
            width: 250px;
            height: 100px;
            border: 1px solid #312d2d;
            margin: 0 auto;
        }
    </style>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h3>Bootstrap 5 Position Fixed top</h3>
        <div class="box fixed-top"></div>
    </div>
</body>
  
</html>

输出:

Bootstrap 5位置固定顶部

例2：在这个例子中，我们将创建一个固定宽度和高度的图像元素，并将其位置设置为固定的顶部。

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Position Fixed top</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
      </script>
    <style>
        .container {
            margin-top: 250px;
        }
        img {
            margin: auto;
        }
    </style>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h3>Bootstrap 5 Position Fixed top</h3>
          
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
            class="fixed-top" alt="GFG Logo">
    </div>
</body>
  
</html>

输出:

Bootstrap 5位置固定顶部