我需要一个 div 来浮动在另一个 div 中。尝试使用position:fixed，但div现在浮动到父div之外。

这是示例代码。 我需要“Div to Float”来浮动在“Div 1”内。现在它浮在“Div 1”之外并位于“Div 2”后面

这是代码。

.wrapper {<!--from  www  .j  av a2s.c  o  m-->
   width:100%;
   height: 200px;
   overflow-y: scroll;
}

.container {
   width: 301px;
  margin: 0px auto;
  height: 1501px;
  background: green;
  position: relative;
}

.element {
   background:yellow;
   position:fixed;
   width:101px;
   height:71px;
   top:51px;
   right:0px;
   left:769px;
   border:2px solid blue;
}

<div class="wrapper">
  <div class="container">
    Div 1
    <div class="element">Div to float</div>
  </div>
</div>
<div class="container" style="margin-top: 30px; background: purple">Div 2</div>

我尝试过什么？

.wrapper {<!--from  www  .j  av a2s.c  o  m-->
   width:100%;
   height: 200px;
   overflow-y: scroll;
}

.container {
   width: 301px;
  margin: 0px auto;
  height: 1501px;
  background: green;
  position: relative;
}

.element {
   background:yellow;
   position:fixed;
   width:101px;
   height:71px;
   top:51px;
   right:0px;
   left:769px;
   border:2px solid blue;
}

<div class="wrapper">
  <div class="container">
    Div 1
    <div class="element">Div to float</div>
  </div>
</div>
<div class="container" style="margin-top: 30px; background: purple">Div 2</div>

我的期望是什么？

我需要“Div to Float”来浮动在“Div 1”内。

现在结果如何？

现在它浮在“Div 1”之外并位于“Div 2”后面