Terapung div di dalam div lain

Question

Saya memerlukan div untuk terapung di dalam div lain. Cuba menggunakan position:fixed tetapi div kini terapung di luar div induk.

Ini adalah contoh kod. Saya memerlukan "Div to Float" untuk terapung di dalam "Div 1". Kini ia terapung di luar "Div 1" dan di belakang "Div 2"

Ini kodnya.

.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>

Apa yang saya dah cuba?

.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>

Apakah jangkaan saya?

Saya memerlukan "Div to Float" untuk terapung di dalam "Div 1".

Apa hasilnya sekarang?

Kini ia terapung di luar "Div 1" dan di belakang "Div 2"

Answer 1

.container {
    position:relative;
}
.element{
position:absolute;
}

Saya tidak faham sepenuhnya apa yang anda maksudkan dengan "terapung", tetapi kod ini akan memusatkan div.element 放在 div.container anda dalam