指尖上的记忆指尖上的记忆
首页
  • 基础
  • Laravel框架
  • Symfony框架
  • 基础
  • Gin框架
  • 基础
  • Spring框架
  • 命令
  • Nginx
  • Ai
  • Deploy
  • Docker
  • K8s
  • Micro
  • RabbitMQ
  • Mysql
  • PostgreSsql
  • Redis
  • MongoDb
  • Html
  • Js
  • 前端
  • 后端
  • Git
  • 知识扫盲
  • Golang
🌟 gitHub
首页
  • 基础
  • Laravel框架
  • Symfony框架
  • 基础
  • Gin框架
  • 基础
  • Spring框架
  • 命令
  • Nginx
  • Ai
  • Deploy
  • Docker
  • K8s
  • Micro
  • RabbitMQ
  • Mysql
  • PostgreSsql
  • Redis
  • MongoDb
  • Html
  • Js
  • 前端
  • 后端
  • Git
  • 知识扫盲
  • Golang
🌟 gitHub

position-fixed的妙用:

<div class="wrap-container" style="
    position: fixed;
    height: calc(100vh - 100px);
    width: 100%;
    max-width: 1410px;
">
      <div class="course-container" style="position: absolute;right: 0;top: 5.9375rem; z-index: 5;">
        <CourseLesson ref="courseLesson"></CourseLesson>
      </div>
    </div>

很重要的结论:

虽然position:fixed是对于浏览器窗口定位的,但是只要不设置fixed元素的top,bottom,left,right,
此时该元素就是相对于父元素进行定位的。如果要移动元素的位置,可以通过margin/padding来实现(就像一个
处理一个普通的div元素一样,之前一直以为position:fixed之后只能相对窗口调整位置,其实不是的)。