css – 位置元素垂直固定,水平绝对

前端之家收集整理的这篇文章主要介绍了css – 位置元素垂直固定,水平绝对前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这里是我想要完成:

我需要一个按钮,它位于距离div的右侧一定距离,并且总是与div的边相同的距离,无论视口的大小,但将与窗口滚动。

因此,它始终是从div的右侧的x像素,但始终从视图端口的顶部的y像素。

这可能吗?

解决方法

位置固定元素水平基于另一个元素

(免责声明:The solution offered here不是技术上的“absolute horizontally”作为问题标题,但是实现了OP最初想要的,固定位置元素是“X”距离另一个的右边缘,但固定在其垂直滚动。

我喜欢这些类型的CSS挑战。作为一个概念证明,是的,you can get what you desire.你可能需要调整一些事情为你的需要,但这里是一些样例html和css通过FireFox,IE8和IE7(IE6,当然,没有位置:固定)。

HTML:

<body>
  <div class="inflow">
    <div class="positioner"><!-- may not be needed: see notes below-->
      <div class="fixed"></div>
    </div>
  </div>
</body>

CSS(边框和所有尺寸的演示):

div.inflow {
  width: 200px; 
  height: 1000px; 
  border: 1px solid blue; 
  float: right; 
  position: relative; 
  margin-right: 100px;
}
div.positioner {position: absolute; right: 0;} /*may not be needed: see below*/
div.fixed {
  width: 80px; 
  border: 1px solid red; 
  height: 100px; 
  position: fixed; 
  top: 60px; 
  margin-left: 15px;
}

关键是不要对div.fixed的水平设置左或右,但使用两个包装器div设置水平位置。如果div.inflow是固定宽度,则不需要div.positioner,因为div.fixed的左边距可以设置为容器的已知宽度。然而,如果你想要容器有一个百分比宽度,那么你将需要div.positioner将div.fixed推到div.inflow的右边。

编辑:作为一个有趣的一方面,当我设置overflow:hidden(应该需要这样做)在div.inflow没有影响固定位置div在另一个边界之外。显然,固定位置足以将其从包含div的上下文中溢出。

猜你在找的CSS相关文章