Saya mencoba untuk memperbaiki divsehingga selalu menempel di bagian atas layar, menggunakan:

position: fixed;
top: 0px;
right: 0px;

Namun, divada di dalam wadah terpusat. Ketika saya menggunakannya position:fixedmemperbaiki divrelatif ke jendela browser, seperti itu di sisi kanan browser. Sebaliknya, itu harus diperbaiki relatif terhadap wadah.

Saya tahu itu position:absolutedapat digunakan untuk memperbaiki elemen relatif terhadap div, tetapi ketika Anda menggulir ke bawah halaman elemen menghilang dan tidak menempel ke atas seperti dengan position:fixed.

Apakah ada peretasan atau solusi untuk mencapai ini?

Jawaban singkat: tidak. (Sekarang dimungkinkan dengan transformasi CSS. Lihat hasil edit di bawah)

Jawaban panjang: Masalah dengan menggunakan pemosisian "tetap" adalah ia menghilangkan elemen dari aliran . sehingga tidak dapat diposisikan kembali relatif terhadap induknya karena seolah-olah tidak memilikinya. Namun, jika wadah memiliki lebar tetap yang diketahui, Anda dapat menggunakan sesuatu seperti:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Edit (03/2015):

Ini adalah informasi yang sudah ketinggalan zaman. Sekarang dimungkinkan untuk memusatkan konten dengan ukuran dinamis (horizontal dan vertikal) dengan bantuan keajaiban transformasi CSS3. Prinsip yang sama berlaku, tetapi alih-alih menggunakan margin untuk mengimbangi wadah Anda, Anda bisa menggunakannya translateX(-50%). Ini tidak berfungsi dengan trik margin di atas karena Anda tidak tahu berapa banyak untuk mengimbanginya kecuali lebarnya diperbaiki dan Anda tidak dapat menggunakan nilai relatif (seperti 50%) karena itu akan relatif terhadap induk dan bukan elemen itu diaplikasikan ke. transformberperilaku berbeda. Nilai-nilainya relatif terhadap elemen yang diterapkannya. Jadi, 50%untuk transformberarti setengah lebar elemen, sedangkan 50%untuk margin adalah setengah dari lebar induk. Ini adalah solusi IE9 +

Menggunakan kode yang mirip dengan contoh di atas, saya membuat ulang skenario yang sama menggunakan lebar dan tinggi dinamis sepenuhnya:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

Jika Anda ingin pusatnya, Anda bisa melakukannya juga:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Demo:

jsFiddle: Hanya
terpusat secara horizontal jsFiddle: Berpusat secara horizontal dan vertikal
Kredit asli diberikan kepada pengguna aaronk6 karena menunjukkannya kepada saya dalam jawaban ini

Sebenarnya ini mungkin dan jawaban yang diterima hanya berurusan dengan sentralisasi, yang cukup mudah. Anda juga benar-benar tidak perlu menggunakan JavaScript.

Ini akan memungkinkan Anda menangani setiap skenario:

Set semuanya seperti yang Anda lakukan jika Anda ingin position: absolute dalam posisi: wadah relatif, dan kemudian membuat div posisi tetap baru di dalam div dengan position: absolute, tetapi tidak set top dan sifat kiri. Kemudian akan diperbaiki di mana pun Anda inginkan, relatif terhadap wadah.

Sebagai contoh:

/* Main site body */
.wrapper {
    width: 940px;
    margin: 0 auto;
    position: relative; /* Ensure absolute positioned child elements are relative to this*/
}

/* Absolute positioned wrapper for the element you want to fix position */
.fixed-wrapper {
    width: 220px;
    position: absolute;
    top: 0;
    left: -240px; /* Move this out to the left of the site body, leaving a 20px gutter */
}

/* The element you want to fix the position of */
.fixed {
    width: 220px;
    position: fixed;
    /* Do not set top / left! */
}

<div class="wrapper">
    <div class="fixed-wrapper">
        <div class="fixed">
            Content in here will be fixed position, but 240px to the left of the site body.
        </div>
    </div>
</div>

Sayangnya, saya berharap thread ini mungkin memecahkan masalah saya dengan Android WebKit piksel render kotak-bayangan blur sebagai margin pada unsur-unsur posisi tetap, tetapi tampaknya itu bug.
Bagaimanapun, saya harap ini membantu!

Ya, menurut spesifikasi, ada cara.

Sementara saya setuju bahwa Graeme Blackwood harus menjadi jawaban yang diterima, karena secara praktis menyelesaikan masalah, perlu dicatat bahwa elemen tetap dapat diposisikan relatif ke wadahnya.

Saya perhatikan secara tidak sengaja ketika melamar

-webkit-transform: translateZ(0);

ke tubuh, itu membuat anak tetap relatif terhadap itu (bukan viewport). Jadi elemen leftdan topproperti tetap saya sekarang relatif terhadap wadah.

Jadi saya melakukan riset, dan menemukan bahwa masalah itu sudah dibahas oleh Eric Meyer dan bahkan jika itu terasa seperti "trik", ternyata ini adalah bagian dari spesifikasinya:

Untuk elemen yang tata letaknya diatur oleh model kotak CSS, nilai apa pun selain tidak ada untuk hasil transformasi dalam penciptaan konteks penumpukan dan blok yang berisi. Objek bertindak sebagai blok yang berisi untuk keturunan yang diposisikan tetap.

http://www.w3.org/TR/css3-transforms/

Jadi, jika Anda menerapkan transformasi apa pun ke elemen induk, itu akan menjadi blok yang berisi.

Tapi...

Masalahnya adalah implementasinya nampak buggy / kreatif, karena elemen-elemennya juga berhenti berperilaku sebagai tetap (walaupun bit ini tampaknya tidak menjadi bagian dari spesifikasi).

Perilaku yang sama akan ditemukan di Safari, Chrome dan Firefox, tetapi tidak di IE11 (di mana elemen tetap akan tetap diperbaiki).

Hal lain yang menarik (tidak terdokumentasi) adalah ketika elemen tetap terdapat di dalam elemen yang ditransformasikan, sedangkan properti topdan leftpropertinya sekarang akan terkait dengan wadah, menghormati box-sizingproperti, konteks penggulirannya akan melampaui batas elemen, seolah-olah kotak -ukuran diatur ke border-box. Untuk beberapa kreatif di luar sana, ini mungkin bisa menjadi mainan :)

UJI

Jawabannya adalah ya, selama Anda tidak mengatur left: 0atau right: 0setelah Anda mengatur posisi div untuk diperbaiki.

http://jsfiddle.net/T2PL5/85/

Periksa div sidebar. Itu sudah diperbaiki, tetapi terkait dengan induknya, bukan ke titik tampilan jendela.

body { background: #ccc; }

.wrapper {
    margin: 0 auto;
    height: 1400px;
    width: 650px;
    background: green;
}

.sidebar {
    background-color: #ddd;
    float: left;
    width: 300px;
    height: 100px;
    position: fixed;
}

.main {
    float: right;
    background-color: yellow;
    width: 300px;
    height: 1400px;
}

<div class="wrapper">wrapper
    <div class="sidebar">sidebar</div>
    <div class="main">main</div>
</div>

position: stickyitu adalah cara baru untuk memposisikan elemen yang secara konsep mirip dengan position: fixed. Perbedaannya adalah bahwa elemen dengan position: stickyberperilaku seperti position: relativedi dalam induknya, sampai ambang offset yang diberikan terpenuhi di viewport.

Di Chrome 56 (saat ini beta pada Desember 2016, stabil pada Januari 2017) posisi: sticky sekarang kembali.

https://developers.google.com/web/updates/2016/12/position-sticky

Lebih detail ada di Stick pendaratan Anda! posisi: tanah lengket di WebKit .

SOLUSI 2019: Anda dapat menggunakan position: stickyproperti.

Berikut adalah contoh CODEPEN yang menunjukkan penggunaan dan juga bagaimana perbedaannya position: fixed.

Bagaimana perilakunya dijelaskan di bawah ini:

1. Elemen dengan posisi lengket diposisikan berdasarkan posisi gulir pengguna. Ini pada dasarnya bertindak seperti position: relativesampai elemen digulir di luar offset tertentu, dalam hal ini berubah menjadi posisi: diperbaiki. Ketika digulir kembali itu akan kembali ke posisi (relatif) sebelumnya.

2. Ini efek aliran elemen lain di halaman yaitu menempati ruang tertentu di halaman (sama seperti position: relative).

3. Jika itu didefinisikan di dalam beberapa wadah, itu diposisikan sehubungan dengan wadah itu. Jika wadah mengalami overflow (gulir), tergantung pada gulir offset itu berubah menjadi posisi: diperbaiki.

Jadi, jika Anda ingin mencapai fungsi tetap tetapi di dalam wadah, gunakan sticky.

Ambil saja gaya atas dan kiri dari posisi tetap. Ini sebuah contoh

<div id='body' style='height:200%; position: absolute; width: 100%; '>
    <div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
        <div id='content' style='position: fixed;'>content</div>
    </div>
</div> 

Div #content akan diletakkan di mana pun div induk berada, tetapi akan diperbaiki di sana.

Saya telah membuat plugin jQuery ini untuk menyelesaikan masalah serupa yang saya alami di mana saya memiliki wadah terpusat (data tabular), dan saya ingin header untuk memperbaiki ke bagian atas halaman ketika daftar digulir, namun saya ingin itu berlabuh ke data tabular sehingga akan berada di mana pun saya meletakkan wadah (tengah, kiri, kanan) dan juga memungkinkannya bergerak ke kiri dan kanan dengan halaman saat digulir secara horizontal.

Berikut ini tautan ke plugin jQuery ini yang dapat mengatasi masalah ini:

https://github.com/bigspotteddog/ScrollToFixed

Deskripsi plugin ini adalah sebagai berikut:

Plugin ini digunakan untuk memperbaiki elemen ke bagian atas halaman, jika elemen tersebut akan digeser keluar dari pandangan, secara vertikal; Namun, itu memungkinkan elemen untuk terus bergerak ke kiri atau ke kanan dengan gulir horizontal.

Diberikan marginTop pilihan, elemen akan berhenti bergerak vertikal ke atas setelah gulir vertikal telah mencapai posisi target; tetapi, elemen masih akan bergerak secara horizontal saat halaman digulir ke kiri atau kanan. Setelah halaman digulirkan kembali melewati posisi target, elemen akan dikembalikan ke posisi semula di halaman.

Plugin ini telah diuji di Firefox 3/4, Google Chrome 10/11, Safari 5, dan Internet Explorer 8/9.

Penggunaan untuk kasus khusus Anda:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed();
});

Saya harus melakukan ini dengan iklan yang klien saya ingin duduk di luar area konten. Saya hanya melakukan yang berikut dan itu bekerja seperti pesona!

<div id="content" style="position:relative; width:750px; margin:0 auto;">
  <div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
    <a href="#" style="position:fixed;"><img src="###" /></a>
  </div>
</div>

Dua elemen HTML dan CSS murni (browser modern)

Lihat contoh jsFiddle ini.Ubah ukuran dan lihat bagaimana elemen-elemen tetap bergerak dengan elemen-elemen terapung yang ada di dalamnya. Gunakan bilah gulir paling dalam untuk melihat bagaimana gulir akan bekerja di sebuah situs (elemen-elemen tetap tetap diperbaiki).

Seperti banyak orang di sini telah menyatakan, salah satu kunci tidak menetapkan pengaturan posisi pada fixedelemen (tidak ada top, right, bottom, atau leftnilai-nilai).

Sebaliknya, kami menempatkan semua elemen tetap (perhatikan bagaimana kotak terakhir memiliki empat dari mereka) pertama di dalam kotak yang harus diposisikan, seperti:

<div class="reference">
  <div class="fixed">Test</div>
  Some other content in.
</div>

Lalu kami menggunakan margin-topdan margin-left"memindahkan" mereka terkait dengan wadahnya, seperti yang dilakukan CSS ini:

.fixed {
    position: fixed;
    margin-top: 200px; /* Push/pull it up/down */
    margin-left: 200px; /* Push/pull it right/left */
}

Perhatikan bahwa karena fixedelemen mengabaikan semua elemen tata letak lainnya, wadah terakhir di biola kami dapat memiliki beberapa fixedelemen, dan masih memiliki semua elemen yang terkait dengan sudut kiri atas. Tapi ini hanya benar jika mereka semua ditempatkan pertama kali dalam wadah, karena biola perbandingan ini menunjukkan bahwa jika tersebar dalam konten wadah, penentuan posisi menjadi tidak dapat diandalkan .

Apakah bungkusnya statis , relatif , atau absolut dalam penentuan posisi, itu tidak masalah.

Anda dapat mencoba plugin jQuery saya, FixTo .

Pemakaian:

$('#mydiv').fixTo('#centeredContainer');

Solusi aneh lain untuk mencapai posisi tetap relatif adalah mengubah wadah Anda menjadi iframe, sehingga elemen tetap Anda dapat diperbaiki ke viewport wadahnya dan bukan seluruh halaman.

Dengan CSS murni Anda tidak dapat mengaturnya; setidaknya saya belum. Namun Anda dapat melakukannya dengan jQuery dengan sangat sederhana. Saya akan menjelaskan masalah saya, dan dengan sedikit perubahan Anda dapat menggunakannya.

Jadi sebagai permulaan, saya ingin elemen saya memiliki top tetap (dari atas jendela), dan komponen kiri mewarisi dari elemen induk (karena elemen induk berpusat). Untuk mengatur komponen kiri, cukup masukkan elemen Anda ke dalam induk dan aturposition:relative untuk elemen induk.

Maka Anda perlu tahu berapa banyak dari atas elemen Anda saat bilah gulir ada di atas (y nol digulir); ada dua opsi lagi. Pertama adalah statis (beberapa angka) atau Anda harus membacanya dari elemen induk.

Dalam kasus saya ini 150 piksel dari statis atas. Jadi ketika Anda melihat 150 berapa elemen dari atas ketika kita belum menggulir.

CSS

#parent-element{position:relative;}
#promo{position:absolute;}

jQuery

$(document).ready(function() { //This check window scroll bar location on start
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');

});
$(window).scroll(function () { //This is when the window is scrolling
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');
});

Ini mudah (sesuai HTML di bawah)

Triknya adalah untuk TIDAK menggunakan atas atau kiri pada elemen (div) dengan "position: fix;". Jika ini tidak ditentukan, elemen "konten tetap" akan muncul RELATIF ke elemen terlampir (div dengan "posisi: relatif;") BUKAN DARI relatif ke jendela browser !!!

<div id="divTermsOfUse" style="width:870px; z-index: 20; overflow:auto;">
    <div id="divCloser" style="position:relative; left: 852px;">
        <div style="position:fixed; z-index:22;">
            <a href="javascript:hideDiv('divTermsOfUse');">
                <span style="font-size:18pt; font-weight:bold;">X</span>
            </a>
        </div>
    </div>
    <div>  <!-- container for... -->
         lots of Text To Be Scrolled vertically...
         bhah! blah! blah!
    </div>
</div>

Di atas memungkinkan saya menemukan tombol "X" penutup di bagian atas banyak teks dalam div dengan pengguliran vertikal. "X" berada di tempatnya (tidak bergerak dengan teks yang digulir, namun bergerak ke kiri atau ke kanan dengan wadah div penutup ketika pengguna mengubah ukuran lebar jendela browser! Dengan demikian "diperbaiki" secara vertikal, tetapi diposisikan relatif terhadap elemen penutup secara horizontal!

Sebelum saya mulai bekerja, "X" digulir ke atas dan tidak terlihat ketika saya menggulirkan konten teks ke bawah.

Permintaan maaf karena tidak menyediakan fungsi javascript hideDiv () saya, tetapi akan membuat posting ini lebih lama tidak perlu. Saya memilih untuk menyimpannya sesingkat mungkin.

Saya membuat jsfiddle untuk mendemonstrasikan cara kerjanya menggunakan transformasi.

HTML

<div class="left">
    Content
</div>
<div class="right">
<div class="fixedContainer">
    X
</div>
    Side bar
</div>

CSS

body {
  margin: 0;
}
.left {
  width: 77%;
  background: teal;
  height: 2000px;
}
.right {
  width: 23%;
  background: yellow;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
}
.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    //right: 0;
    top: 0%;
    transform: translateX(-100px);
}

jQuery

$('.fixedContainer').on('click', function() {
    $('.right').animate({'width': '0px'});
  $('.left').animate({'width': '100%'});
});

https://jsfiddle.net/bx6ktwnn/1/

Saya memiliki masalah yang sama, salah satu anggota tim kami memberi saya solusi. Untuk mengizinkan posisi fix div dan relatif ke div lainnya, solusi kami adalah menggunakan wadah ayah bungkus div fix dan gulir div.

<div class="container">
  <div class="scroll"></div>
  <div class="fix"></div>
</div>

css

.container {
  position: relative;
  flex:1;
  display:flex;
}

.fix {
  prosition:absolute;
}

/* html */

/* this div exists purely for the purpose of positioning the fixed div it contains */
<div class="fix-my-fixed-div-to-its-parent-not-the-body">

     <div class="im-fixed-within-my-container-div-zone">
          my fixed content
     </div>

</div>



/* css */

/* wraps fixed div to get desired fixed outcome */
.fix-my-fixed-div-to-its-parent-not-the-body 
{
    float: right;
}

.im-fixed-within-my-container-div-zone
{
    position: fixed;
    transform: translate(-100%);
}

Ya itu mungkin selama Anda tidak mengatur posisi ( topatau left, dll.) Dari fixedelemen Anda (Anda masih dapat menggunakan marginuntuk mengatur posisi relatif, meskipun). Simon Bos memposting tentang ini beberapa waktu lalu .

Namun jangan berharap elemen tetap untuk menggulir dengan kerabat tidak tetap.

Lihat demo di sini .

Saya melakukan sesuatu seperti itu beberapa waktu lalu. Saya cukup baru dalam JavaScript, jadi saya yakin Anda dapat melakukan lebih baik, tetapi ini adalah titik awalnya:

function fixxedtext() {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        if (document.body.offsetWidth > 960) {
            var width = document.body.offsetWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (document.body.offsetWidth < 960) {
            var width = 960 - document.body.offsetWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    else {
        if (window.innerWidth > 960) {
            var width = window.innerWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (window.innerWidth < 960) {
            var width = 960 - window.innerWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    window.setTimeout("fixxedtext()", 2500)
}

Anda perlu mengatur lebar Anda, dan kemudian mendapatkan lebar jendela dan mengubah margin setiap beberapa detik. Saya tahu ini berat, tetapi berhasil.

Itu mungkin jika Anda menggunakan JavaScript. Dalam hal ini, plugin jQuery Sticky-Kit :

Proyek saya adalah .NET ASP Core 2 MVC Angular 4 template dengan Bootstrap 4. Menambahkan "sticky-top" ke dalam html komponen aplikasi utama (yaitu app.component.html) pada baris pertama berfungsi, sebagai berikut:

<div class='row sticky-top'>
    <div class='col-sm-12'>
        <nav-menu-top></nav-menu-top>
    </div>
</div>
<div class="row">
    <div class='col-sm-3'>
        <nav-menu></nav-menu>
    </div>
    <div class='col-sm-9 body-content'>
        <router-outlet></router-outlet>
    </div>
</div>

Apakah itu konvensi atau apakah saya terlalu menyederhanakan ini?

Ketika Anda menggunakan position:fixedaturan CSS dan mencoba menerapkan top/ left/ right/ bottomposisikan elemen relatif ke jendela.

Solusinya adalah menggunakan marginproperti alih-alih top/ left/ right/bottom

Periksa ini:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body style="width: 1000px !important;margin-left: auto;margin-right: auto">
        <div style="width: 100px; height: 100px; background-color: #ccc; position:fixed;">
        </div>
        <div id="1" style="width: 100%; height: 600px; background-color: #800000">
        </div>
        <div id="2" style="width: 100%; height: 600px; background-color: #100000">
        </div>
        <div id="3" style="width: 100%; height: 600px; background-color: #400000">
        </div>
    </body>
</html>