Faire flotter un div dans un autre div

Question

J'ai besoin d'un div pour flotter à l'intérieur d'un autre div. J'ai essayé d'utiliser position:fixed mais le div flotte désormais en dehors du div parent.

Ceci est un exemple de code. J'ai besoin de "Div to Float" pour flotter à l'intérieur de "Div 1". Maintenant, il flotte à l'extérieur de "Div 1" et derrière "Div 2"

Voici le code.

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

Qu'ai-je essayé ?

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

Quelles sont mes attentes ?

J'ai besoin de "Div to Float" pour flotter à l'intérieur de "Div 1".

Quel est le résultat maintenant ?

Maintenant, il flotte à l'extérieur de "Div 1" et derrière "Div 2"

Answer 1

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

Je ne comprends pas bien ce que vous entendez par "flottant", mais ce code centrera votre div.element 放在 div.container dans