我可以定位相对于父元素固定的元素吗？ [复制]

Question

我发现当我定位一个元素时，无论父元素是否相对定位，它都会相对于窗口定位固定？

#wrapper {
  width: 300px;
  background: orange;
  margin: 0 auto;
  position: relative;
}

#feedback {
  position: fixed;
  right: 0;
  top: 120px;
}

<div id="wrapper">
    ...
    <a id="feedback" href="#">Feedback</a>
</div>

http://jsbin.com/ibesa3

Answer 1

CSS 规范要求position:fixed 锚定到视口，而不是包含定位元素。

如果您必须指定相对于父元素的坐标，则必须先使用 JavaScript 找到父元素相对于视口的位置，然后相应地设置子（固定）元素的位置。

替代：一些浏览器支持sticky CSS，这限制了元素在其容器和视口中的定位。根据提交消息：

sticky ... 将元素限制在其容器盒和视口的交点内。

粘性定位元素的行为类似于 position:relative（空格是 保留为其流入），但偏移量由 粘性位置。更改 isInFlowPositioned() 以涵盖相对和 粘性。

根据您的设计目标，此行为在某些情况下可能会有所帮助。它目前是一个工作草案，除了表格元素外，还得到了不错的支持。 position: sticky 在 Safari 中仍然需要 -webkit 前缀。

有关浏览器支持的最新统计信息，请参阅 caniuse。

Answer 2

让我回答这两个可能的问题。请注意，您现有的标题（和原始帖子）提出的问题不同于您在编辑和后续评论中寻求的问题。

---

要相对于父元素“固定”定位元素，您需要在子元素上使用position:absolute，并在父元素上使用除默认或静态以外的任何位置模式。 p>

例如：

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

这会将childDiv 元素定位在相对于 parentDiv 的位置向左 50 像素和向下 20 像素的位置。

---

要相对于窗口“固定”定位元素，您需要position:fixed，并且可以使用top:、left:、right: 和bottom: 定位为你觉得合适。

例如：

#yourDiv { position:fixed; bottom:40px; right:40px; }

这会将yourDiv 定位为相对于网络浏览器窗口固定的位置，距离底部边缘 40 像素，距离右侧边缘 40 像素。

Answer 3

2016 年更新

现在可以在现代浏览器中定位相对于其容器固定的元素。具有 transform 属性的元素充当其任何固定位置子元素的视口。

或者正如CSS Transforms Module 所说的那样：

对于布局由 CSS 框模型控制的元素，transform 属性的任何值（除了 none 之外）也会导致元素为所有后代建立一个包含块。它的填充框将用于为其所有绝对位置后代、固定位置后代和后代固定背景附件进行布局。

.context {
  width: 300px;
  height: 250px;
  margin: 100px;
  transform: translateZ(0);
}
.viewport {
  width: 100%;
  height: 100%;
  border: 1px solid black;
  overflow: scroll;
}
.centered {
  position: fixed;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
}

<div class="context">
  <div class="viewport">
    <div class="canvas">

      <table>
        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>
        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>

        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>

        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>
      </table>

      <button class="centered">OK</button>

    </div>
  </div>
</div>

Answer 4

首先，设置position: fixed 和left: 50%，第二个——现在你的起点是一个中心，你可以设置新的位置和边距。

Answer 5

我知道这是超级旧的，但在没有找到我正在寻找的（纯 CSS）答案后，我想出了这个解决方案（部分从 medium.com 抽象出来），并认为它可能会帮助其他想要做同样事情的人。

如果您结合@DuckMaestro 的答案，您可以相对于父母（实际上是祖父母）定位一个固定的元素。使用position: absolute; 将元素定位在具有position: relative; 的父元素内，然后将position: fixed; 定位在绝对定位元素内的元素上，如下所示：

HTML

<div class="relative">
  <div class="absolute">
    <a class="fixed-feedback">This element will be fixed</a>
  </div>
</div>

CSS

.relative {
  margin: 0 auto;
  position: relative;
  width: 300px;
}

.absolute {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
}

.fixed-feedback {
  position: fixed;
  top: 120px;
  width: 50px;
}

EXAMPLE

就像@JonAdams 所说，position: fixed 的定义要求元素相对于视口定位，但您可以使用此解决方案绕过水平方面。

注意：这与仅在固定元素上设置right 或left 值不同，因为这会导致它在调整窗口大小时水平移动。

Answer 6

这个解决方案对我有用！参考原文详细回答：https://stackoverflow.com/a/11833892/5385623

css:

.level1 {
    position: relative;
}


.level2 {
    position: absolute;
}


.level3 {
    position: fixed;
    /* Do not set top / left! */
}

html:

<div class='level1'>
    <div class='level2'>
        <div class='level3'>
            Content
        </div>
    </div>
</div>

Answer 7

这是上面 Jon Adams 建议的一个示例，目的是使用 jQuery 将 div（工具栏）固定到页面元素的右侧。这个想法是找到从视口右侧到页面元素右侧的距离，并将工具栏的右侧保持在那里！

HTML

<div id="pageElement"></div>
<div id="toolbar"></div>

CSS

#toolbar {
    position: fixed;
}
....

jQuery

​​>

function placeOnRightHandEdgeOfElement(toolbar, pageElement) {
    $(toolbar).css("right", $(window).scrollLeft() + $(window).width()
    - $(pageElement).offset().left
    - parseInt($(pageElement).css("borderLeftWidth"),10)
    - $(pageElement).width() + "px");
}
$(document).ready(function() {
    $(window).resize(function() {
        placeOnRightHandEdgeOfElement("#toolbar", "#pageElement");
    });
    $(window).scroll(function () { 
        placeOnRightHandEdgeOfElement("#toolbar", "#pageElement");
    });
    $("#toolbar").resize();
});

Answer 8

这是一篇旧帖子，但我会在这里留下我的 javascript 解决方案，以防万一有人需要它。

---

// you only need this function
function sticky( _el ){
  _el.parentElement.addEventListener("scroll", function(){
    _el.style.transform = "translateY("+this.scrollTop+"px)";
  });
}


// how to make it work:
// get the element you want to be sticky
var el = document.querySelector("#blbl > div");
// give the element as argument, done.
sticky(el);

#blbl{
  position:relative;
  height:200px;  
  overflow: auto;
  background: #eee;
}

#blbl > div{
  position:absolute; 
  padding:50px; 
  top:10px; 
  left:10px; 
  background: #f00
}

<div id="blbl" >
    <div><!-- sticky div --></div> 

    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

---

注意事项

1. 我使用 transform: translateY(@px) 因为它应该是轻量级的计算，high-performance-animations

2. 我只在现代浏览器上尝试过这个功能，它不适用于需要供应商的旧浏览器（当然还有 IE）

Answer 9

我知道这是一篇较旧的帖子，但我认为在这个网站上已经可以找到 Jiew Meng 尝试做的一个很好的例子。查看位于此处的侧边菜单：https://stackoverflow.com/faq#questions。在没有深入研究的情况下查看它，我可以告诉 javascript 在滚动命中锚标记下方时附加一个固定位置，如果滚动超出同一锚标记，则删除固定位置。希望这能让某人朝着正确的方向开始。

Answer 10

通过多个 div，我设法获得了一个固定 y 和绝对 x div。 在我的情况下，我需要一个左右两侧的 div，与居中的 1180 像素宽度的 div 对齐。

    <div class="parentdiv" style="
        background: transparent;
        margin: auto;
        width: 100%;
        max-width: 1220px;
        height: 10px;
        text-align: center;">
        <div style="
            position: fixed;
            width: 100%;
            max-width: 1220px;">
            <div style="
                position: absolute;
                background: black;
                height: 20px;
                width: 20px;
                left: 0;">
            </div>
            <div style="
                width: 20px;
                height: 20px;
                background: blue;
                position: absolute;                                           
                right: 0;">
            </div>
        </div>
    </div>