你可以使用CSS中的'position'属性和'overflow'属性来实现内容滑动而不遮盖标题的效果。

首先,将标题的'position'属性设置为'fixed',这将使标题固定在页面上而不会随着内容滚动。然后,将内容的'overflow'属性设置为'scroll',这将在内容溢出时显示滚动条。

下面是一个示例代码:

<!DOCTYPE html>
<html>
<head>
<style>
  .title {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #f1f1f1;
    text-align: center;
    line-height: 50px;
  }
  
  .content {
    margin-top: 50px;
    height: 300px;
    overflow: scroll;
  }
</style>
</head>
<body>
  <div class="title">固定标题</div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu ante eget nisl convallis tempus. Phasellus ante lectus, tincidunt tincidunt dui a, rhoncus interdum est. Sed molestie quis augue ac pulvinar. Pellentesque egoists</p>
    <!-- 内容超出高度,将显示滚动条 -->
  </div>
</body>
</html>

在这个示例中,标题具有固定的位置,并且内容具有可滚动的'overflow'属性。这样,即使内容超出高度,也可以通过滚动条来查看其余的内容,而不会遮盖标题。

标题固定,内容增加overflow,内容滑动不遮盖标题css

原文地址: https://www.cveoy.top/t/topic/qnwQ 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录