美文网首页
49.overflow:visible 和 auto

49.overflow:visible 和 auto

作者: yaoyao妖妖 | 来源:发表于2019-01-25 12:44 被阅读4次
    屏幕快照 2019-01-25 12.36.37.png

    层级关系
    .container {
    .scroller-container {
    .right-container {
    }
    }
    }

    .container {
     height: 300px;
     width: 80%;
     background: yellow;
     overflow-y:auto;/scroller
    }
    .right-container {
     position: absolute;
     right: 0;
     width: 20%;
     height: 100px;
     background-color: red;
    }
    .scroller-container {
     width: 100%;
     height: 800px;
     background: white;
     opacity: .5;
    }
    
    屏幕快照 2019-01-25 12.36.56.png
    .container {
      height: 300px;
      width: 80%;
      background: yellow;
      overflow-y:visible;
    }
    .right-container {
      position: absolute;
      right: 0;
      width: 20%;
      height: 100px;
      background-color: red;
    }
    .scroller-container {
      width: 100%;
      height: 800px;
      background: white;
      opacity: .5;
    }
    
    1. 注意看滚动条的位置,二者滚动的区域不同
    2. auto那种方式可以实现红色区域fixed的效果(悬浮窗)

    相关文章

      网友评论

          本文标题:49.overflow:visible 和 auto

          本文链接:https://www.haomeiwen.com/subject/syymjqtx.html