Question

我有一个绝对的div并且已经修复了width和height，我为滚动条添加了溢出自动功能。在这种情况下它有3个孩子，其中一个是position: fixed，但是当我滚动固定元素也是滚动时，我不确定我做错了什么。

<div class="parent">

<div class="child-1">
    <h1>Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</h1>
</div>

<div class="child-2">
    <h1>Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</h1>
</div>

<div class="child-3">
    <h1>I am fixed.</h1>
</div>

这是css

.parent {
position: absolute;
width: 320px;
right: 0;
top: 0;
 height: 250px;
 overflow: auto;
bottom: 0;
background: yellow;
z-index: 1000000;
}
.parent .child-3 {
    position: fixed;
    right: 0;
    top: 5px;
    color: red;
}

Answer 1

它是固定的，它只是固定在父元素上，你可以滚动它。

<div class="parent">
  <div class="sub-parent">
    <div class="child-1">
          <h1>Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</h1>
      </div>

     <div class="child-2">
       <h1>Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</h1>
     </div>
  </div>
    <div class="child-3">
        <h1>I am fixed.</h1>
    </div>

</div>


.parent {
  position: relative;
}
.sub-parent {
    position: absolute;
    width: 320px;
    right: 0;
    top: 0;
  height: 250px;
  overflow: auto;
    bottom: 0;
    background: yellow;
    z-index: 1;
}

.parent .child-3 {
    position: fixed;
    right: 0;
    top: 5px;
    color: red;
  z-index: 10
}

https://jsfiddle.net/baqfqojs/

希望对你有用。

位置固定不在溢出隐藏父级内

1 个答案: