Question

可能这不可能，但我必须尝试：让我们想象一个固定在视口上的元素。

Position: fixed;  
Top: 30px;
Left: 0px;

但右侧相对于页面（容器）上的某个元素position: static并且不在固定元素内浮动。它在页面的某个地方是外部的，独立的，静态的：

我知道如果我设置固定元素的正确位置，通常会相对于视口的右侧设置。

因此，在这种情况下，在调整浏览器大小时，固定元素的右侧不会相对于视口的右侧，而是相对于容器的右侧。

也许有些javaScript？ jQuery的？

Answer 1

如果您事先知道＆＃34;容器＆＃34;的右边缘。将谎言（基于其宽度/左侧偏移），您可以使用CSS3 calc() function在大多数现代浏览器中实现所需的布局。在伪代码中，right的公式类似于：

right: calc(100% - container_width - container_left_offset);

这是代码的工作演示：

＆＃13;

body,
html {
  margin: 0;
}
#fixed {
  background: #CCC;
  height: 30px;
  left: 0;
  position: fixed;
  right: calc(100% - 100px - 300px);
  top: 30px;
}
#static {
  background: #999;
  height: 800px;
  margin-left: 300px;
  width: 100px;
}

＆＃13;

<div id="fixed">
  Fixed
</div>
<div id="static">
  Container
</div>

＆＃13;

但是，如果事先无法知道容器的右边缘位置（例如动态宽度/可变内容），那么您可能需要采用JavaScript路线。希望这可以帮助！如果您有任何问题，请告诉我。

Answer 2

如果我理解正确，你的意思是这样的

这是使用纯css实现的，css文件被调用（在示例中）style.css，这是它的内容

H1 {颜色：红}

.fixed-div{
    position: fixed;
    top:20px;
    left:50px;
    width: 80%;
    height: 2em;
    border: 2px #789875 dotted 
}

.f_container{
    position: relative;
    float: right;
    margin:-20px 0 0 0;
    height: 80vh;
    background-color: #778854;
    border: 1px #946427 solid
}

.floating_text{float:left;}

你可以看到它非常简单，fixed-div类控制固定div的行为（这里没有脑子）我认为css不需要进一步的解释，但是，如果你需要它，我很乐意提供它

浮动容器由f_container类

设置样式

你可以看到这个类是相对的（对于固定的div）并且在它的右侧浮动，这样，如果视口大小调整使得固定的div宽度改变（因为它的宽度是视口大小的％））浮动容器将始终适应变化。

你的问题没有指定浮动div高度是否与视口相关，但是因为它是最有趣的场景（如果它是固定的，你可以简单地设置它），这就是我将在这里介绍的那个;如您所见，css类包含：

height: 80vh;

是一个视口单元，代表视口高度的1/100

所以，你可以说

80vh=80% of the viewports height

希望我理解你的问题，这个答案很有帮助

编辑：忘了添加html

<html>
    <head>
        <link href="style.css" rel="stylesheet" />
    </head>
    <body>
        <div class="fixed-div">
            <div class="f_container">
                this is your floating container
            </div>
            <p class="floating_text"> this is the fixed div</p>

        </div>

    </body>
</html>

固定元素相对于视口（左）和静态元素（右）定位

2 个答案: