Css 固定但相对于容器的位置

我必须显示两个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
    }

有人能帮我修改这个代码吗

---

感谢您使用

时使用位置：固定相对于浏览器窗口定位元素

要使用自己的父容器，需要将#in和#out设置为使用
position:absolute位置：relative设置它

编辑：这里有一把小提琴：
当使用
时位置：固定相对于浏览器窗口定位元素

要使用自己的父容器，需要将#in和#out设置为使用
position:absolute位置：relative设置它

编辑：这里有一把小提琴：
我不确定这是否正是您要寻找的，但基本上kmmathis是正确的

标记：

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

而JS：

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

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

基本上，您将子元素设置为相对于其父元素进行定位，并且当您滚动时，窗口的滚动量将设置元素的
top
。它的定位是固定的，但相对于其父对象进行定位。它不是100%，但它可能会给你一个如何实现你想要的基本想法。
我不确定这是否正是你想要的，但基本上kmmathis是正确的

标记：

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

而JS：

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

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

基本上，您将子元素设置为相对于其父元素进行定位，并且当您滚动时，窗口的滚动量将设置元素的
top
。它的定位是固定的，但相对于其父对象进行定位。虽然不是100%，但它可能会给你一个如何实现你想要的基本想法。
当使用
位置：固定它将元素固定到屏幕上。你不能用CSS将它相对于一个元素进行定位，事实上，如果你想知道position:fixed是什么，你就永远不会想将它相对于一个元素进行定位，我觉得这听起来是不可能的。从流中取出固定位置的元素，使其相对于视口，而不能将其放回流中的某个位置
 使用
时位置：固定它将元素固定到屏幕上。你不能用CSS将它相对于一个元素进行定位，事实上，如果你想知道position:fixed是什么，你就永远不会想将它相对于一个元素进行定位，我觉得这听起来是不可能的。从流中取出固定位置的元素，使其相对于视口，而不能将其放回流中的某个位置
 你知道什么位置是固定的吗？你能解释一下你想要什么吗？也许举个例子，因为我不确定我是否了解你。是的，我知道@putvande，我认为皮诺奇的解决方案解决了我的问题。你知道什么
位置：fixed
正确吗？你能解释一下你想要什么吗？也许举个例子，因为我不确定我是否了解你。是的，我知道@putvande，我认为皮诺奇的解决方案解决了我的问题