Question

我必须显示两个div（in和out），以便它们位于左侧，另一个位于右侧。

使用这个css代码，它们非常适合全屏，但我希望能够将它们放入父div中，这将是容器

#in{
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: 50%;
      overflow: auto;
      font-size: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }

#out{
      position: fixed;
      top: 0;
      right: 0;
      left: 50%;
      bottom: 0;
      overflow: auto;
      padding: 10px;
      padding-left: 20px;
      color: #444;
      font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
      font-size: 16px;
      line-height: 1.5em
    }

有人可以帮我修改这段代码吗？

谢谢

Answer 1

我不确定这是不是你正在寻找的，但基本上是kmmathis是正确的。 http://jsfiddle.net/R8bUQ/

标记：

<div>
    <div>
    </div>
</div>

和CSS：

div {
    height: 800px;
    width: 300px;
    background: #f0f;
    margin-top: 80px;
    margin-left: 180px;
    position: relative;
}
div div {
    height: 20px;
    width: 100%;
    background: #0f0;
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
}

和JS：

$parent = $('div').eq(0);
$elem = $parent.find('div');

$(window).scroll(function(){ 
    $elem.css('top', $(window).scrollTop());
}).trigger('scroll');

基本上，您将子项设置为相对于其父项定位，并且在滚动时，窗口滚动的量将设置元素的top。它是固定的定位，但相对于其父级定位。这不是100％，但它可能会让您了解如何实现您想要的目标。

Answer 2

使用position: fixed;时，它会将元素修复到屏幕上。你无法将它相对于具有CSS的元素定位，事实上如果你想到position: fixed你永远不想将它放在相对于元素的位置，并且想到它听起来对我来说是不可能的。从流中取出固定定位的元素，使其相对于视口，您不能将其放回某处的流中。

Answer 3

使用position:fixed;时，您将相对于浏览器窗口定位元素。

要使用您自己的父容器，您需要将#in和#out设置为使用position:absolute;，然后将它们包装在容器中，假设#wrap已设置为position:relative;它

编辑：这是一个小提琴：http://jsfiddle.net/ktAAa/

位置固定但相对于容器

3 个答案: