美文网首页
[CSS]局部模块实现固定定位(模拟fixed)

[CSS]局部模块实现固定定位(模拟fixed)

作者: 泉落云生 | 来源:发表于2018-05-11 15:28 被阅读23次
    <style>
    .assistor {
      position: relative; /*关键点*/
      display: block;
      width: 500px;
      height: 300px;
      margin: 100px auto 0 auto;
      background-color: red;
    }
    .parent {
      width: 500px;
      height: 300px;
      background-color: green;
      overflow: auto; /*关键点 就一定要宽高*/ 
      position:static; /*一定是默认值*/
    }
    .child {
      position: absolute; /*关键点*/
      width: 120px;
      height: 120px;
      margin: 100px 50px;
      background-color: yellow;
    }
    .placeholder {
      width: 1000px;
      height: 1000px;
      background:orange
    }
    </style>
    <div class="assistor">
      <div class="parent">
        this is father or mathor. haha , it`s so funny,isn't it?
        <div class="child">
           there is a fixed module. fake ;-)
        </div>
        <div class="placeholder">
            there is a content
        </div>
      </div>
    </div>
    
    

    该方法其实是模拟了position:fixed,因为fixed,总是相对于html<-可以看做是根级的盒子。
    在所需模块设置overflow:hidden,并且在外增加一个宽高相同的盒子,设置相对定位。
    需要固定的模块设置绝对定位。就实现了局部的固定定位。

    相关文章

      网友评论

          本文标题:[CSS]局部模块实现固定定位(模拟fixed)

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