CSS固定层的效果实现

最新推荐文章于 2023-04-12 12:40:12 发布

crper

最新推荐文章于 2023-04-12 12:40:12 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记-HTML4&amp;5/CSS2.1&amp;3 文章标签： CSS-fixed css固定层 absolute position fixed

本文链接：https://blog.youkuaiyun.com/crper/article/details/46120589

本文介绍了CSS固定层的作用和制作方法，重点讲解了如何通过CSS的position属性实现固定效果。固定层在页面滚动时不移动，常用于头部、底部和页面中间导航。文章详细阐述了预备知识，包括DIV+CSS基础和position属性的区别，并提供了代码示例，演示了顶部、底部及中间反馈的固定层实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

固定层的作用

内容不随页面滚动
应用范围
一般用于头部导航/底部导航/页面中间导航(京东的宝贝详情页有用到,看图)

小伙伴们可以去京东随便打开一个宝贝看看…

制作

预备知识:

DIV+CSS基础
css position的四个参数作用,这里主要用到fixed属性

Tips:

fixed和absolute都是脱离文档流的, 区别如下
- absolute会随页面滚动而fixed不会
- absolute的父级元素若是使用了position属性,absolute会遵循就近原则,以最近的父辈为基准
fixed定位，未设置偏移量时，如有已定位祖先元素，以祖先元素为基准定位；无已定位元素或有偏移量，均以浏览器窗口为基准偏移

代码实现

没有用到图片,用背景色和边框来区别,实现了顶部和底部固定,以及中间反馈固定
代码很简易,基本都是CSS2.1的知识,内含注释,看下面代码

<!DOCTYPE html>
<html lang="zh">

  <head>
    <meta charset="UTF-8">
    <title>CSS固定层的效果实现</title>
    <style>
      * {
    
    
        margin: 0;
        padding: 0;
        outline: 0;
        border: 0;
        font-size: 100%;
      }
      /*CSS简易版reset*/

      ul {
    
    
        list-style: none;
      }

      ul li {
    
    
        float: left;
        margin: 25px;
        border: 2px solid #000;
        width: 140px;
        height: 40px;
        font-size: 30px;
        line-height: 30px;
        font-weight: bold;
      }

      div a {
    
    
        text-decoration: none;
      }
      /*ul及li的基础样式*/

      body {
    
    
        padding-top: 100px;
        padding-bottom: 80px;
      }
      /*看最后一段注释*/

      p.hightline {
    
    
        color: #f00;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
      }
      /*高亮内容第一段和最后一段*/

      #contianer {
    
    
        margin: 0 auto;
        background: #99E025;
        width: 800px;
        positon: relative;
      }
      /*盒子居中,背景颜色,宽度*/

      #header {
    
    
        background: #5CE755;
        height: 100px;
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
      }
      /*顶部固定,因为宽度100%所以铺满*/

      #content p {
    
    
        text-indent: 2em;
      }
      /*行首缩进*/

      #footer {
    
    
        background: #5CE755;
        height: 80px;
        position: fixed;