Tôi đang cố gắng khắc phục divđể nó luôn dính vào phía trên màn hình, sử dụng:

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

Tuy nhiên, divbên trong một container trung tâm. Khi tôi sử dụng, position:fixednó sửa lỗi divtương đối với cửa sổ trình duyệt, chẳng hạn như nó ở phía bên phải của trình duyệt. Thay vào đó, nó nên được cố định liên quan đến container.

Tôi biết rằng position:absolutecó thể được sử dụng để sửa một phần tử liên quan đến div, nhưng khi bạn cuộn xuống trang, phần tử đó sẽ biến mất và không dính vào đầu như với position:fixed.

Có một hack hoặc cách giải quyết để đạt được điều này?

Câu trả lời ngắn gọn: không. (Hiện tại có thể chuyển đổi CSS. Xem phần chỉnh sửa bên dưới)

Câu trả lời dài: Vấn đề với việc sử dụng định vị "cố định" là nó đưa phần tử ra khỏi luồng . do đó, nó không thể được định vị lại so với cha mẹ của nó bởi vì nó như thể nó không có. Tuy nhiên, nếu container có chiều rộng cố định, đã biết, bạn có thể sử dụng một cái gì đó như:

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

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

Chỉnh sửa (03/2015):

Đây là thông tin lỗi thời. Bây giờ có thể căn giữa nội dung có kích thước động (theo chiều ngang và chiều dọc) với sự trợ giúp của phép thuật biến đổi CSS3. Nguyên tắc tương tự được áp dụng, nhưng thay vì sử dụng lề để bù vào container của bạn, bạn có thể sử dụng translateX(-50%). Điều này không hoạt động với thủ thuật lề trên vì bạn không biết bù bao nhiêu trừ khi chiều rộng được cố định và bạn không thể sử dụng các giá trị tương đối (như 50%) vì nó sẽ liên quan đến cha mẹ chứ không phải yếu tố đó áp dụng cho. transformcư xử khác nhau. Giá trị của nó liên quan đến yếu tố mà chúng được áp dụng. Do đó, 50%đối với transformphương tiện có nghĩa là một nửa chiều rộng của phần tử, trong khi 50%đối với lề là một nửa chiều rộng của cha mẹ. Đây là một giải pháp IE9 +

Sử dụng mã tương tự với ví dụ trên, tôi đã tạo lại cùng một kịch bản bằng cách sử dụng chiều rộng và chiều cao hoàn toàn động:

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

Nếu bạn muốn nó là trung tâm, bạn cũng có thể làm điều đó:

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

Bản trình diễn:

jsFiddle: Chỉ được căn giữa theo chiều ngang
jsFiddle: Được căn giữa cả theo chiều ngang và chiều dọc
Tín dụng gốc dành cho người dùng aaronk6 vì đã chỉ ra cho tôi câu trả lời này

Trên thực tế điều này là có thể và câu trả lời được chấp nhận chỉ liên quan đến việc tập trung hóa, điều này đủ đơn giản. Ngoài ra, bạn thực sự không cần phải sử dụng JavaScript.

Điều này sẽ cho phép bạn đối phó với bất kỳ kịch bản:

Thiết lập mọi thứ như bạn muốn nếu bạn muốn định vị: tuyệt đối bên trong một vị trí: thùng chứa tương đối, sau đó tạo div vị trí cố định mới bên trong div với position: absolute, nhưng không đặt thuộc tính trên cùng và bên trái của nó. Sau đó nó sẽ được cố định bất cứ nơi nào bạn muốn, liên quan đến container.

Ví dụ:

/* 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>

Đáng buồn thay, tôi đã hy vọng chủ đề này có thể giải quyết vấn đề của tôi với các pixel mờ bóng hộp kết xuất WebKit của Android dưới dạng lề trên các thành phần vị trí cố định, nhưng có vẻ như đó là một lỗi.
Dù sao, tôi hy vọng điều này sẽ giúp!

Vâng, theo thông số kỹ thuật, có một cách.

Mặc dù tôi đồng ý rằng Graeme Blackwood nên là câu trả lời được chấp nhận, vì thực tế nó giải quyết được vấn đề, cần lưu ý rằng một yếu tố cố định có thể được định vị tương đối với thùng chứa của nó.

Tôi tình cờ nhận thấy rằng khi áp dụng

-webkit-transform: translateZ(0);

với cơ thể, nó tạo ra một đứa trẻ cố định liên quan đến nó (thay vì khung nhìn). Vì vậy, các yếu tố leftvà topthuộc tính cố định của tôi bây giờ liên quan đến container.

Vì vậy, tôi đã thực hiện một số nghiên cứu và thấy rằng vấn đề đã được Eric Meyer đề cập và ngay cả khi nó cảm thấy giống như một "mánh khóe", hóa ra đây là một phần của thông số kỹ thuật:

Đối với các phần tử có bố cục được điều chỉnh bởi mô hình hộp CSS, bất kỳ giá trị nào khác không có giá trị cho biến đổi đều dẫn đến việc tạo cả bối cảnh xếp chồng và khối chứa. Đối tượng hoạt động như một khối chứa cho con cháu định vị cố định.

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

Vì vậy, nếu bạn áp dụng bất kỳ phép chuyển đổi nào cho phần tử cha, nó sẽ trở thành khối chứa.

Nhưng...

Vấn đề là việc triển khai có vẻ có lỗi / sáng tạo, bởi vì các yếu tố cũng ngừng hoạt động như cố định (ngay cả khi bit này dường như không phải là một phần của đặc tả).

Hành vi tương tự sẽ được tìm thấy trong Safari, Chrome và Firefox, nhưng không có trong IE11 (nơi phần tử cố định vẫn sẽ được cố định).

Một điều thú vị (không có tài liệu) khác là khi một phần tử cố định được chứa bên trong một phần tử được chuyển đổi, trong khi các thuộc tính topvà leftthuộc tính của nó bây giờ sẽ liên quan đến vùng chứa, tôn trọng thuộc box-sizingtính, bối cảnh cuộn của nó sẽ mở rộng ra khỏi đường viền của phần tử, như thể hộp kích thước đã được đặt thành border-box. Đối với một số sáng tạo ngoài kia, điều này có thể có thể trở thành một đồ chơi :)

KIỂM TRA

Câu trả lời là có, miễn là bạn không đặt left: 0hoặc right: 0sau khi bạn đặt vị trí div thành cố định.

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

Kiểm tra div sidebar. Nó là cố định, nhưng liên quan đến cha mẹ, không liên quan đến điểm xem cửa sổ.

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: stickyđó là một cách mới để định vị các yếu tố tương tự về mặt khái niệm position: fixed. Sự khác biệt là một phần tử có position: stickyhành position: relativevi giống như trong phần tử mẹ của nó, cho đến khi một ngưỡng bù cho trước được đáp ứng trong khung nhìn.

Trong Chrome 56 (hiện đang là beta tính đến tháng 12 năm 2016, ổn định vào tháng 1 năm 2017): vị trí dính đã trở lại.

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

Thêm chi tiết trong Stick hạ cánh của bạn! vị trí: vùng đất dính trong WebKit .

GIẢI PHÁP 2019: Bạn có thể sử dụng position: stickytài sản.

Dưới đây là một ví dụ CODEPEN thể hiện cách sử dụng và cũng như nó khác với như thế nào position: fixed.

Cách nó hoạt động được giải thích dưới đây:

1. Một phần tử có vị trí dính được định vị dựa trên vị trí cuộn của người dùng. Về cơ bản, nó hoạt động như thế position: relativecho đến khi một phần tử được cuộn vượt ra ngoài một phần bù cụ thể, trong trường hợp đó, nó biến thành vị trí: cố định. Khi nó được cuộn trở lại, nó sẽ trở về vị trí (tương đối) trước đó.

2. Nó ảnh hưởng đến dòng chảy của các yếu tố khác trong trang tức là chiếm một không gian cụ thể trên trang (giống như position: relative).

3. Nếu nó được định nghĩa bên trong một số container, nó được định vị đối với container đó. Nếu container có một số tràn (cuộn), tùy thuộc vào phần bù cuộn, nó sẽ chuyển sang vị trí: cố định.

Vì vậy, nếu bạn muốn đạt được chức năng cố định nhưng bên trong một thùng chứa, hãy sử dụng dính.

Chỉ cần lấy các kiểu trên cùng và bên trái ra khỏi vị trí div cố định. Đây là một ví dụ

<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 sẽ được đặt ở bất cứ nơi nào div cha mẹ ngồi, nhưng sẽ được sửa ở đó.

Tôi đã tạo plugin jQuery này để giải quyết vấn đề tương tự tôi gặp phải khi tôi có một thùng chứa ở giữa (dữ liệu dạng bảng) và tôi muốn tiêu đề sửa vào đầu trang khi danh sách được cuộn, nhưng tôi muốn nó được neo vào dữ liệu dạng bảng sẽ là bất cứ nơi nào tôi đặt thùng chứa (chính giữa, trái, phải) và cũng cho phép nó di chuyển sang trái và phải với trang khi cuộn theo chiều ngang.

Đây là liên kết đến plugin jQuery này có thể giải quyết vấn đề này:

https://github.com/bigspiateddog/ScrollToFixed

Mô tả về plugin này như sau:

Plugin này được sử dụng để sửa các phần tử ở đầu trang, nếu phần tử đó sẽ cuộn ra khỏi chế độ xem, theo chiều dọc; tuy nhiên, nó cho phép phần tử tiếp tục di chuyển sang trái hoặc phải với cuộn ngang.

Đưa ra một tùy chọn marginTop, phần tử sẽ ngừng di chuyển theo chiều dọc lên trên khi cuộn dọc đã đến vị trí đích; nhưng, phần tử vẫn sẽ di chuyển theo chiều ngang khi trang được cuộn sang trái hoặc phải. Khi trang đã được cuộn xuống qua vị trí mục tiêu, phần tử sẽ được khôi phục về vị trí ban đầu trên trang.

Plugin này đã được thử nghiệm trong Firefox 3/4, Google Chrome 10/11, Safari 5 và Internet Explorer 8/9.

Sử dụng cho trường hợp cụ thể của bạn:

<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();
});

Tôi đã phải làm điều này với một quảng cáo mà khách hàng của tôi muốn ngồi ngoài khu vực nội dung. Tôi chỉ đơn giản là làm như sau và nó hoạt động như một bùa mê!

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

Hai yếu tố HTML và CSS thuần (trình duyệt hiện đại)

Xem ví dụ jsFiddle này. Thay đổi kích thước và xem cách các phần tử cố định thậm chí di chuyển với các phần tử nổi mà chúng đang ở. Sử dụng thanh cuộn trong cùng để xem cách cuộn sẽ hoạt động trên một trang web (các phần tử cố định được cố định).

Như nhiều người ở đây đã tuyên bố, một trong những chìa khóa không thiết lập bất kỳ cài đặt vị trí trên fixedphần tử (không có top, right, bottom, hoặc leftgiá trị).

Thay vào đó, chúng tôi đặt tất cả các yếu tố cố định (lưu ý cách hộp cuối cùng có bốn trong số chúng) trước tiên trong hộp chúng được định vị, như vậy:

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

Sau đó, chúng tôi sử dụng margin-topvà margin-left"di chuyển" chúng liên quan đến thùng chứa của chúng, giống như CSS này:

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

Lưu ý rằng vì fixedcác phần tử bỏ qua tất cả các phần tử bố cục khác, nên phần chứa cuối cùng trong fiddle của chúng ta có thể có nhiều fixedphần tử và vẫn có tất cả các phần tử liên quan đến góc trên cùng bên trái. Nhưng điều này chỉ đúng nếu tất cả chúng được đặt đầu tiên trong container, vì câu đố so sánh này cho thấy rằng nếu phân tán trong nội dung của container, việc định vị trở nên không đáng tin cậy .

Cho dù trình bao bọc là tĩnh , tương đối hay tuyệt đối trong định vị, điều đó không quan trọng.

Bạn có thể dùng thử plugin jQuery của tôi, FixTo .

Sử dụng:

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

Một giải pháp kỳ lạ khác để đạt được một vị trí cố định tương đối là chuyển đổi vùng chứa của bạn thành iframe, theo cách đó, phần tử cố định của bạn có thể được sửa thành khung nhìn của nó chứ không phải toàn bộ trang.

Với CSS thuần, bạn không thể quản lý để làm điều đó; ít nhất là tôi đã không. Tuy nhiên, bạn có thể làm điều đó với jQuery rất đơn giản. Tôi sẽ giải thích vấn đề của mình và với một chút thay đổi bạn có thể sử dụng nó.

Vì vậy, để bắt đầu, tôi muốn phần tử của tôi có một đỉnh cố định (từ trên cùng của cửa sổ) và một thành phần bên trái để kế thừa từ phần tử cha (vì phần tử cha được căn giữa). Để đặt thành phần bên trái, chỉ cần đặt phần tử của bạn vào phần tử mẹ và đặt position:relativecho phần tử cha.

Sau đó, bạn cần biết phần tử của bạn nằm trên đỉnh bao nhiêu khi thanh cuộn ở trên cùng (y zero cuộn); Có hai lựa chọn một lần nữa. Đầu tiên là tĩnh (một số số) hoặc bạn phải đọc nó từ phần tử cha.

Trong trường hợp của tôi, nó là 150 pixel từ đầu tĩnh. Vì vậy, khi bạn nhìn thấy 150, phần tử từ trên xuống là bao nhiêu khi chúng ta không cuộn.

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');
});

Điều này thật dễ dàng (theo HTML bên dưới)

Thủ thuật là KHÔNG sử dụng đỉnh hoặc trái trên phần tử (div) với "vị trí: đã sửa;". Nếu những điều này không được chỉ định, phần tử "nội dung cố định" sẽ xuất hiện LIÊN QUAN ĐẾN phần tử kèm theo (div với "vị trí: tương đối;") INSTEAD OF liên quan đến cửa sổ trình duyệt !!!

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

Ở trên cho phép tôi xác định vị trí nút "X" ở đầu rất nhiều văn bản trong một div với cuộn dọc. "X" nằm đúng vị trí (không di chuyển với văn bản cuộn và nó di chuyển sang trái hoặc phải với thùng chứa div kèm theo khi người dùng thay đổi kích thước chiều rộng của cửa sổ trình duyệt! Do đó, nó được "cố định" theo chiều dọc, nhưng được định vị so với các yếu tố kèm theo theo chiều ngang!

Trước khi tôi làm việc này, "X" cuộn lên và khuất tầm nhìn khi tôi cuộn nội dung văn bản xuống.

Xin lỗi vì không cung cấp hàm ẩn javascript () của javascript, nhưng nó sẽ không cần thiết làm cho bài đăng này dài hơn. Tôi đã chọn giữ nó càng ngắn càng tốt.

Tôi đã tạo một jsfiddle để làm sáng tỏ cách thức hoạt động của nó bằng cách sử dụng biến đổi.

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/

Tôi có cùng một vấn đề, một trong những thành viên trong nhóm của chúng tôi cho tôi một giải pháp. Để cho phép vị trí sửa lỗi div và liên quan đến div khác, giải pháp của chúng tôi là sử dụng thùng chứa cha bọc div sửa lỗi và cuộn 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%);
}

Có, có thể miễn là bạn không đặt vị trí ( tophoặc left, v.v.) của fixedphần tử của bạn ( marginmặc dù vậy bạn vẫn có thể sử dụng để đặt vị trí tương đối). Simon Bos đã đăng về điều này một thời gian trước đây .

Tuy nhiên, đừng mong đợi phần tử cố định cuộn với người thân không cố định.

Xem bản demo tại đây .

Tôi đã làm một cái gì đó như thế một lúc trở lại. Tôi còn khá mới với JavaScript, vì vậy tôi chắc chắn bạn có thể làm tốt hơn, nhưng đây là điểm khởi đầu:

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)
}

Bạn sẽ cần đặt chiều rộng của mình, và sau đó nó sẽ lấy chiều rộng cửa sổ và thay đổi lề sau mỗi vài giây. Tôi biết nó nặng, nhưng nó hoạt động.

Điều đó là có thể nếu bạn sử dụng JavaScript. Trong trường hợp này, plugin jQuery -Kit :

Dự án của tôi là mẫu .NET Angular 4 MVC Angular 4 với Bootstrap 4. Thêm "stick-top" vào thành phần ứng dụng chính html (tức là app.component.html) trên hàng đầu tiên hoạt động, như sau:

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

Đó có phải là quy ước hay tôi đã quá đơn giản hóa điều này?

Khi bạn sử dụng position:fixedquy tắc CSS và cố gắng áp dụng top/ left/ right/ bottomnó định vị phần tử liên quan đến cửa sổ.

Cách giải quyết là sử dụng margincác thuộc tính thay vì top/ left/ right/bottom

Kiểm tra điều này:

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