我需要一個 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」後面