it-swarm-id.com

Memperbaiki div yang diposisikan dalam div orang tua relatif

Saat ini saya sedang membangun situs web yang responsif dan perlu menu untuk diperbaiki, sehingga tidak menggulir ketika situs lainnya menggulir. masalahnya adalah bahwa itu adalah tata letak yang cair dan saya ingin item menu "posisi tetap" diperbaiki relatif terhadap elemen induk yang mengandung dan bukan ke jendela browser. adakah yang bisa dilakukan?

24
Gavin Wood

Pertanyaan ini muncul pertama kali di Google meskipun yang lama jadi saya memposting jawaban yang saya temukan, yang dapat berguna bagi orang lain.

Ini membutuhkan 3 divs termasuk div tetap.

HTML

<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

CSS

.wrapper { position:relative; width:1280px; }
    .parent { position:absolute; }
        .child { position:fixed; width:960px; }
15
Leo

Gavin, 

Masalah yang Anda hadapi adalah kesalahpahaman tentang penentuan posisi. Jika Anda ingin "diperbaiki" relatif terhadap induk, maka Anda benar-benar ingin #fixed Anda menjadi position:absolute yang akan memperbarui posisinya relatif terhadap induk. 

Pertanyaan ini sepenuhnya menjelaskan jenis posisi dan cara menggunakannya secara efektif.

Singkatnya, CSS Anda seharusnya 

#wrap{ 
    position:relative;
}
#fixed{ 
    position:absolute;
    top:30px;
    left:40px;
}
14
Fuzzical Logic

Solusi mudah yang tidak melibatkan beralih ke JavaScript dan tidak akan merusak transformasi CSS adalah dengan hanya memiliki elemen non-gulir, ukuran yang sama dengan elemen gulir Anda, diposisikan secara absolut di atasnya.

Struktur HTML dasar akan menjadi

<div class="parent-to-position-by">
    <div class="fixed-elements">
        <div class="fixed">
            I am &quot;fixed positioned&quot;
        </div>
    </div>
    <div class="scrolling-contents">
        Lots of contents which may be scrolled.
    </div>
</div>
  • parent-to-position-by akan menjadi relatif div untuk memposisikan sesuatu yang diperbaiki sehubungan dengan.
  • scrolling-contents akan merentang ukuran div ini dan berisi konten utamanya
  • fixed-elements hanya div yang diposisikan mutlak yang menjangkau ruang yang sama di atas scrolling-contentsdiv.
  • dengan memposisikan secara absolut div dengan kelas fixed, ia mencapai efek yang sama seolah-olah diposisikan tetap sehubungan dengan induk div. (atau konten gulir, karena mereka menjangkau ruang penuh itu)

Ini js-biola dengan contoh kerja

7
KernelDeimos

Ini dimungkinkan jika Anda memindahkan <div> tetap menggunakan margin dan bukan posisi:

#wrap{ position:absolute;left:100px;top:100px; }
#fixed{ 
   position:fixed;
   width:10px;
   height:10px;
   background-color:#333;
   margin-left:200px;
   margin-top:200px;
}

Dan HTML ini:

<div id="wrap">
   <div id="fixed"></div>
</div>

Bermain-main dengan jsfiddle ini .

4
JCOC611

Hal sederhana yang dapat Anda lakukan adalah memposisikan DIV tetap Anda relatif terhadap halaman Anda yang lain dengan nilai%.

Lihatlah jsfiddle di sini di mana DIV yang diperbaiki adalah bilah sisi.

div#wrapper {
    margin: auto;
    width: 80%;
}

div#main {
    width: 60%;
}

div#sidebar {
    position: fixed;
    width: 30%;
    left: 60%;
}

Dan gambaran singkat di bawah ini menggambarkan tata letak di atas:

 example layout

2
afable

zde je obecnější řešení, které nezávisí na výšce nabídky/záhlaví. untuk semua yang ada di sini, Pure CSS řešení, funguje skvěle na IE8 +, Firefox, Chrome, Safari, opera. podporuje rolování obsahu bez ovlivnění menu/záhlaví.

Otestujte untuk mereka Working Fiddle

Html:

<div class="Container">
    <div class="First">
        <p>The First div height is not fixed</p>
        <p>This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, using Pure CSS 2.1 only</p>
    </div>
    <div class="Second">
        <div class="Wrapper">
            <div class="Centered">
                <p>The Second div should always span the available Container space.</p>
                <p>This content is vertically Centered.</p>
            </div>
        </div>
    </div>
</div>

Služba CSS:

*
{
    margin: 0;
    padding: 0;
}

html, body, .Container
{
    height: 100%;
}

    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }

.First
{
    /*for demonstration only*/
    background-color: #bf5b5b;
}

.Second
{
    position: relative;
    z-index: 1;
    /*for demonstration only*/
    background-color: #6ea364;
}

    .Second:after
    {
        content: '';
        clear: both;
        display: block;
    }

/*This part his relevant only for Vertically centering*/
.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
}
    .Wrapper:before
    {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }

.Centered
{
    display: inline-block;
    vertical-align: middle;
}
1
avrahamcool

anda dapat memperbaiki pembungkus menggunakan posisi absolut . dan div bagian dalam posisi tetap.

.wrapper{
 position:absolute;
 left:10%;// or some Valve in px
 top:10%; // or some Valve in px
 }

dan div di dalamnya 

.wrapper .fixed-element{ 
position:fixed;
width:100%;
height:100%;
margin-left:auto; // to center this div inside at center give auto margin
margin-right:auto;
}

coba ini Ini mungkin bekerja untuk Anda

1
Mandar Kawtakwar

Coba posisi: lengket pada elemen induk.

1
Lohit Bisen

Solusi sampel. Periksa, apakah ini yang Anda butuhkan. 

<div class="container">
   <div class="relative">      
      <div class="absolute"></div>      
      <div class="content">
        <p>
          Content here
        </p>
      </div>
    </div>
 </div>

Dan untuk CSS

.relative { 
  position: relative;
}

.absolute {
  position: absolute;
  top: 15px;
  left: 25px;   
}

Lihat di codepen https://codepen.io/FelySpring/pen/jXENXY

0
Fely Spring