美文网首页
[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