如何将元素固定到距屏幕边缘可变距离的页面？

Question

我有一个图形需要在我网页的容器 div 的 66% 处显示为粘性元素。 'position:fixed' 通常正是我想要的，但是，由于这修复了视口和容器 div 有时与视口边缘的距离未知，我无法使用它来确定它应该显示的精确水平点。

一些更多信息：容器 div 是响应式的，最大为 1080 像素，当视口宽度超过 1080 像素时，它以视口为中心。所以这个图形的位置只能参考最大 1080px 宽的视口来确定。除此之外，图形需要显示在 [(total-width-of-viewport-1080px)/2 + 66% of 1080px] 处。不知道如何用 CSS!

渲染它

我想到的另一种方法是使用绝对定位将元素精确地固定到容器 div 并使用一些 jquery 魔术来更新关于视口顶部的垂直位置作为用户滚动以赋予它 'sticky' 质量。但是，我为这种方法找到的所有解决方案对于我想要实现的目标来说似乎都是大材小用。

如果有任何解决方案或建议，我将不胜感激。

编辑：我附上了一张图片来说明问题： http://i.imgur.com/AOrpczt.png

Answer 1

给外面的div一个position:relative，给里面的一个position:absolute。

运行全屏片段并以 window 大小播放。您还可以在此 fiddle

中更改 window 大小

#wrapper{
    max-width: 600px;
    width: 100%;
    position: relative;
    top: 0px;
    right: 0px;
    background: goldenrod;
    height: 300px;
}

#elem {
    width: 66%;
    position: absolute;
    top: 0px;
    right: 0px;
    background: royalblue;
    height: 300px;
}

<div id="wrapper">
    <div id="elem">
    </div>
</div>

Answer 2

感谢 DSMann8 提醒我同时存在 calc() 和 VW 以及一些谷歌搜索，我已经解决了这个问题。这是我试图定位的元素的完整 CSS，对于任何感兴趣的人：

span#scissors {
  background: transparent url(../imgs/new/scissors.png) no-repeat left top;
  display: block;       
  width: 16px;
  height: 34px;
  position: fixed;  
  top: 400px;
}

@media (max-width: 1080px) {
  span#scissors {
    left: calc(66VW - 8px);
  }
}
@media (min-width: 1079px) {
  span#scissors {
    left: calc(((100VW - 1080px) / 2) + (1080px * 2/3));
    margin-left: -8px;
  }
}

谢谢大家的帮助！

如何将元素固定到距屏幕边缘可变距离的页面？

How can I fix an element to the page that is of a variable distance from the edge of the screen?

css

jquery

sticky