CSS 基础学习-124 css使用position:fixed 属性设置固定定位

由 hrs, 23 十月, 2021

使用position:fixed 属性设置固定定位

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

实例代码；

<!doctype html>
<html>
  <head>
    <style>
      div.fixed{
        border:3px solid green;
        position:fixed; /*设置相对定位*/
        width:00px;
        bottom:0;
        right:0;
      }   
    </style>
  </head>
  <body>
    <h1>position:fixed;属性固定定位实例</h1>
    <div class="fixed">
      这个div元素设置position:fixed;
    </div>
    <br>
    <p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留>在某个位置。</p>
  </body>
</html>

运行效果；

css-124.png

标签

评论