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:

  1. <body>
  2. <div class="inflow">
  3. <div class="positioner"><!-- may not be needed: see notes below-->
  4. <div class="fixed"></div>
  5. </div>
  6. </div>
  7. </body>

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

  1. div.inflow {
  2. width: 200px;
  3. height: 1000px;
  4. border: 1px solid blue;
  5. float: right;
  6. position: relative;
  7. margin-right: 100px;
  8. }
  9. div.positioner {position: absolute; right: 0;} /*may not be needed: see below*/
  10. div.fixed {
  11. width: 80px;
  12. border: 1px solid red;
  13. height: 100px;
  14. position: fixed;
  15. top: 60px;
  16. margin-left: 15px;
  17. }

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

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

猜你在找的CSS相关文章