Css 你能混合固定相对定位吗

发布于09月28日

有没有可能有一个相对的DIV，里面有一个固定位置的DIV，它是相对于容器固定的，而不是固定在windows 上？

我try 了以下答案中显示的解决方案:

Fixed position but relative to container个

但似乎都没有奏效.下面是我正在使用的HTML/CSS(它是角落中的粉色DIV，我希望相对于它的容器进行修复):

<html>

<body>

  hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu
  hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu
  hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu
  hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu
  hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu
  hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho


  <div style="transform: translateZ(0); width: 100%; height: 200px; background-color: #ddd; overflow: auto; padding: 10px; position: relative">
    <div style="position: fixed; top: 20px; right: 20px; background-color: pink; padding: 3px; border: 1px solid gray">Blah!</div>
    gygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghj
  </div>


</body>

</html>

hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho <div style="transform: translateZ(0); width: 100%; height: 200px; background-color: #ddd; overflow: hidden; padding: 10px; position: relative"> <div style="position: absolute; top: 20px; right: 20px; background-color: pink; padding: 3px; border: 1px solid gray; width: 100px;">Blah!</div> <div style="overflow: auto; width: 100%; height: 100%;"> gygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghj </div> </div>

Css 你能混合固定相对定位吗

推荐答案

Css相关问答推荐

如何将CSS Paint API与Reaction一起使用

下拉面板未与Angular中的下拉文本框垂直对齐

如何将 div 和 img 包装在 display：flex 容器中

当弯曲方向设置为列时如何制作等高卡片？

为什么：focus 会覆盖：focus-visible ？

在 React 中使用 CSS 动画 onClick()

如何增加 PrimeFlex 网格的间隙？

带有 gatsby-plugin-image 的 bootstrap 卡 ImgOverlay 未按预期调整大小

为什么标题中的特定 div 与 Odoo 13 中 PDF 中的页面重叠？

无法使用 Bootstrap 3 更改占位符 colored颜色

找到第一个可滚动的父级

li 中的第二行在 CSS-reset 后的项目符号下开始

将 Web 字体转换和渲染为 base64 - 保持原始外观

内联块列表项中不需要的边距

更改 FontAwesome 图标的字体粗细？

如何使用 Bootstrap2 使 div 居中？

如何在 Chrome 的判断器中添加/插入之前或之后的伪元素？

CSS 悬停与 JavaScript 鼠标悬停

如何根据容器大小设置字体大小？

如何在 CSS 中给出背景图像路径？