Terapung div di dalam div lain
P粉207483087
P粉207483087 2024-04-03 18:26:07
0
1
497

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"

P粉207483087
P粉207483087

membalas semua(1)
P粉041881924
.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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan