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

css CSS

Itachi宝儿

2020-03-24

I find that when I position an element fixed, it doesn't matter if the parent is positioned relative or not, it will position fixed, relative to the window?

CSS

#wrapper { width: 300px; background: orange; margin: 0 auto; position: relative; }
#feedback { position: fixed; right: 0; top: 120px; }

HTML

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

http://jsbin.com/ibesa3

第3686篇《我可以相对于父元素定位固定的元素吗？\[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共9个回答

Tom神奇 2020.03.24

通过多个div，我设法获得了固定y和绝对x的div。在我的情况下，我需要在左右两侧设置一个div，并与一个居中的1180px宽度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>

Mandy古一 2020.03.24

我知道这是一篇较旧的文章，但是我认为在这个网站上已经可以找到有关孟梦杰想要做什么的一个很好的例子。查看位于此处的侧边菜单：https : //stackoverflow.com/faq#questions。看着它而不必太深，我可以告诉JavaScript，一旦滚动到达锚定标记下方，JavaScript便会附加一个固定位置；如果滚动移至同一锚定标记上方，则将固定位置移除。希望这将使某人朝正确的方向开始。

西里Near 2020.03.24

这是一篇旧文章，但是我会在这里留下我的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>

笔记

我使用了transform：translateY（@px），因为它应该轻量级地进行计算，高性能动画
我只在现代浏览器中尝试过此功能，但在需要供应商（当然还有IE）的旧浏览器中无法使用

猿阿飞 2020.03.24

2016更新

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

或如CSS转换模块所说：

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

.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>

阳光梅 2020.03.24

首先，设置position: fixed和 left: 50%，然后第二个-现在您的起点是一个中心，并且可以使用边距设置新位置。

番长猴子 2020.03.24

这是上述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();
});

老丝 2020.03.24

我知道这太旧了，但是在没有找到（纯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;
}

例

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

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

阿飞 2020.03.24

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

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

替代：某些浏览器具有stickyCSS支持，这限制了将元素放置在其容器和视口中的位置。根据提交消息：

sticky ...约束元素放置在其容器框和视口的交点内。

粘滞放置的元素的行为类似于position：relative（在流中为其保留空间），但偏移量由粘滞位置确定。更改了isInFlowPositioned（）以覆盖相对和粘性。

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

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

DavaidTony宝儿 2020.03.24

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

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

例如：

#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相对于Web浏览器窗口，它的位置是固定的，距底部边缘40像素，距右侧边缘40像素。

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android