html中纵向位置调整,css – 位置元素垂直固定,水平绝对

最新推荐文章于 2023-08-12 22:49:16 发布

weixin_39673002

最新推荐文章于 2023-08-12 22:49:16 发布

阅读量442

点赞数

文章标签： html中纵向位置调整

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

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

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

HTML：

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的上下文中溢出。