Lassen Sie ein Div innerhalb eines anderen Div schweben

Question

Ich brauche ein Div, um in einem anderen Div zu schweben. Habe es mit „position:fixed“ versucht, aber das Div schwebt jetzt außerhalb des übergeordneten Div.

Dies ist Beispielcode. Ich brauche „Div to Float“, um innerhalb von „Div 1“ zu schweben. Jetzt schwebt es außerhalb von „Div 1“ und hinter „Div 2“

Hier ist der 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>

Was habe ich versucht?

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

Was sind meine Erwartungen?

Ich brauche „Div to Float“, um innerhalb von „Div 1“ zu schweben.

Was ist jetzt das Ergebnis?

Jetzt schwebt es außerhalb von „Div 1“ und hinter „Div 2“

Answer 1

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

我不完全理解你所说的“浮动”是什么意思，但是这段代码会将你的 div.element 放在 div.container 中