我可以将元素相对于父元素定位吗？

Question

我发现当我将一个元素定位为固定时,如果父元素相对与否定位无关紧要,它将相对于窗口定位固定？

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

Answer 1

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

如果必须指定相对于父级的坐标,则必须先使用JavaScript查找父级相对于视口的位置,然后相应地设置子级(固定)元素的位置.

替代方案:某些浏览器具有stickyCSS支持,这限制了元素在其容器和视口中的位置.根据提交消息:

sticky ...约束要在其容器框和视口的交叉点内定位的元素.

粘性定位元素的行为类似于position:relative(为流入内容保留空间),但偏移量由粘性位置决定.更改了isInFlowPositioned()以覆盖相对和粘性.

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

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

Answer 2

让我提供两个可能问题的答案.请注意,您现有的标题(和原始帖子)提出的问题与您在编辑和后续评论中所寻求的问题不同.

要将元素相对于父元素定位为"固定",您需要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像素.

Answer 3

首先,设置position: fixed和 left: 50%,第二 - 现在你的开始是一个中心,你可以设置保证金的新头寸.

Answer 4

2016年更新

现在可以在现代浏览器中定位相对于其容器固定的元素.具有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>

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;
}

例

就像@JonAdams所说的那样,定义position: fixed要求元素相对于视口定位,但是你可以使用这个解决方案绕过横向方面.

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

Answer 6

以下是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 7

这个解决方案对我有用！参考原文详细回答：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 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)因为它应该是轻量级计算的高性能动画

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