仅使用 css 修复内部 div [重复]

Posted 2023-03-06

【中文标题】仅使用 css 修复内部 div [重复]

【英文标题】：Make inner div fixed using only css [duplicate]

【发布时间】：2016-09-02 09:17:43

【问题描述】：

我正在尝试使内部 div 相对于它的父 div 固定。我在jsfiddle 上做了一个我的代码示例。问题是当你滚动 div 时。它不再在它的位置上。我的 html 看起来像：

 <div class="outer">
   <div class="inner1">
     Lorem ipsum dolor
   </div>
   <div class="inner2">

   </div>

</div>

和css

    .outer
  position: relative;
  width: 400px;
  height: 300px;
  border: 1px solid black;
  overflow: auto;


.inner1
  position: absolute;
  width:50px;
  height: auto;
  border: 1px solid blue;
  top: 10px;
  right: 10px;

.inner2
  width: 500px;
  height: 500px;

有没有办法让inner1 相对于outer 仅使用css 固定？

【问题讨论】：

“CSS 规范要求position:fixed 锚定到viewport，而不是包含定位元素。” 参考this 答案..

fixed 与父级无关！它总是停留在给定的位置！

我知道不是！我只想让 inner1 即使在你滚动时也保持在它的位置上......我知道其中一个解决方案是在 JS 中计算偏移量并使用 position: fixed.. 但我的问题是，如果你只能使用 css 来做到这一点

【参考方案1】：

试试这个...

 <style>
.outer
  position: relative;
  width: 400px;
  height: 300px;
  border: 1px solid black;
  overflow: auto;


.inner1
  position: fixed;
  width:50px;
  height: auto;
  border: 1px solid blue;


.inner2
  width: 500px;
  height: 500px;

</style>

【参考方案2】：

你可以试试这个：

.inner1 
        position: fixed;
        width: 50px;
        height: auto;
        border: 1px solid blue;
        top: 10px;
        right: calc(100% - 400px); // 400px is the outer div's width
    

【参考方案3】：

这里正在工作JSfiddle

<div class="container">
<div class="header">title</div>
<div class="cont_elements">
    <div class="element">......</div>
    <div class="element">......</div>
    <div class="element">......</div>
</div>

和 css 将是

.header 
    position: absolute;
    top:0;
    /* scrolling out of view :-( */
    z-index:2;
    background-color:pink;

.container 
    position:relative;
    width:200px;
    height:400px;
    background:gold;

.cont_elements overflow-y:scroll; height:100%;
.element 
    position: relative;

【参考方案4】：

只需更改 .inner1

.inner1
    position: fixed;
    width:50px;
    height: auto;
    border: 1px solid blue;
    margin-top: 10px;
    left: 330px;