Я намагаюся виправити divтак, щоб він завжди прилипав до верхньої частини екрана, використовуючи:

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

Однак divвсередині є централізований контейнер. Коли я використовую, position:fixedвін виправляє divвідносно вікна браузера, наприклад, проти правої частини браузера. Натомість він повинен бути закріплений відносно контейнера.

Я знаю, що position:absoluteможе бути використаний для виправлення елемента відносно div, але коли ви прокручуєте сторінку вниз, елемент зникає і не прилипає до верху, як з position:fixed.

Чи є хакер чи вирішення для досягнення цього?

Коротка відповідь: ні. (Тепер це можливо за допомогою перетворення CSS. Див. Редагування нижче)

Довга відповідь: Проблема використання "фіксованого" позиціонування полягає в тому, що воно виводить елемент з потоку . таким чином, його не можна переставити відносно свого батьківського, тому що це як би у нього не було. Якщо контейнер має фіксовану, відому ширину, ви можете використовувати щось на зразок:

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

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

Редагувати (03/2015):

Це застаріла інформація. Тепер можна централізувати вміст динамічного розміру (по горизонталі та вертикалі) за допомогою магії перетворення CSS3. Цей же принцип діє, але замість того, щоб використовувати поле для компенсації вашого контейнера, ви можете використовувати translateX(-50%). Це не працює з вищезазначеним фокусом на полях, оскільки ви не знаєте, скільки його компенсувати, якщо ширина не встановлена, і ви не можете використовувати відносні значення (наприклад 50%), оскільки це буде відносно батьківського, а не елемента, застосовується до. transformповодиться по-різному. Його значення відносно елемента, до якого вони застосовуються. Таким чином, 50%для transformозначає половина ширини елемента, тоді як 50%для поля - половина батьківської ширини. Це рішення IE9 +

Використовуючи аналогічний код до наведеного вище прикладу, я відтворив той самий сценарій, використовуючи повністю динамічну ширину та висоту:

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

Якщо ви хочете, щоб його було по центру, ви можете зробити це також:

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

Демо:

jsFiddle: По горизонталі в центрі тільки
jsFiddle: по центру як по горизонталі , так і по вертикалі
в вихідної Заслуга користувача aaronk6 для вказівки його мені в цій відповіді

Насправді це можливо, і прийнята відповідь стосується лише централізації, що досить просто. Також вам дійсно не потрібно використовувати JavaScript.

Це дозволить вам впоратися з будь-яким сценарієм:

Налаштуйте все так, як хотілося б, якщо ви хочете розташувати: абсолютний всередині позиції: відносний контейнер, а потім створіть нову поділену фіксовану позицію всередині div position: absolute, але не встановлюйте її верхню та ліву властивості. Потім він буде закріплений куди завгодно, відносно контейнера.

Наприклад:

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

На жаль, я сподівався, що цей потік може вирішити мою проблему з розмиттям пікселів розмиття коробки WebKit Android як поля на фіксованих елементах позиції, але, здається, це помилка.
У будь-якому випадку, я сподіваюся, що це допомагає!

Так, згідно зі специфікаціями, є спосіб.

Хоча я погоджуюся, що відповідь Graeme Blackwood має бути прийнятою відповіддю, оскільки це практично вирішує питання, слід зазначити, що нерухомий елемент може бути розміщений відносно його контейнера.

Я випадково помітив, що при подачі заявки

-webkit-transform: translateZ(0);

до тіла, це зробило нерухому дитину відносно нього (замість вікна перегляду). Тому мої нерухомі елементи leftта topвластивості тепер були відносно контейнера.

Тож я провів кілька досліджень, і виявив, що проблему вже висвітлював Ерік Мейєр, і навіть якщо це відчувалося як "хитрість", виявляється, що це частина специфікацій:

Для елементів, розмітка яких керується моделлю вікон CSS, будь-яке значення, крім жодного, для перетворення призводить до створення контексту укладання та блоку, що містить. Об'єкт виконує роль блоку, що містить фіксовану позицію нащадків.

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

Отже, якщо застосувати будь-яке перетворення до батьківського елемента, він стане блоком, що містить.

Але ...

Проблема полягає в тому, що реалізація здається невдалою / креативною, оскільки елементи також перестають поводитися як виправлені (навіть якщо цей біт не здається частиною специфікації).

Така ж поведінка буде виявлена ​​в Safari, Chrome та Firefox, але не в IE11 (де нерухомий елемент все ще залишатиметься виправленим).

Ще одна цікава (незадокументована) річ полягає в тому, що коли нерухомий елемент міститься всередині трансформованого елемента, а його topта leftвластивості тепер будуть пов’язані з контейнером, зважаючи на box-sizingвластивість, його контекст прокрутки пошириться за межу елемента, немовби поле -розмір встановлено на border-box. Для деяких креативів там, можливо, це може стати іграшкою :)

ТЕСТ

Відповідь - так, доки ви не встановите left: 0або right: 0після встановлення фіксованого положення діва.

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

Оформити бічну панель div. Він фіксований, але пов'язаний з батьківською, а не з точкою перегляду вікна.

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це новий спосіб розташування елементів, які концептуально схожі на position: fixed. Різниця полягає в тому, що елемент, який position: stickyведе себе так, як і position: relativeвсередині свого батьківського доти, до тих пір, поки заданий поріг зміщення не буде досягнутий у вікні перегляду.

У Chrome 56 (наразі бета-версія станом на грудень 2016 року, стабільна в січні 2017 року) позиція: липкий повернувся.

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

Більш детальна інформація знаходиться в " Дотримуйтесь посадки"! позиція: липкі землі в WebKit .

РІШЕННЯ 2019: Ви можете користуватися position: stickyмайном.

Ось приклад CODEPEN, що демонструє використання, а також, чим він відрізняється від position: fixed.

Як це поводиться, пояснюється нижче:

1. Елемент з клейкою позицією розміщується на основі положення прокрутки користувача. Це в основному діє, position: relativeпоки елемент не прокручується за межі певного зміщення, і в цьому випадку він перетворюється в положення: фіксований. Коли вона прокручується назад, вона повертається до попереднього (відносного) положення.

2. Це впливає на потік інших елементів сторінки, тобто займає певний простір на сторінці (так само position: relative).

3. Якщо він визначений всередині якогось контейнера, він розташовується відносно цього контейнера. Якщо контейнер має деякий перелив (прокрутка), залежно від зміщення прокрутки він переходить у положення: фіксований.

Тому якщо ви хочете досягти фіксованої функціональності, але всередині контейнера, використовуйте липкий.

Просто вийміть верхній і лівий стилі з фіксованого положення div. Ось приклад

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

Див #content буде сидіти там, де сидить батьківський дів, але там буде закріплено.

Я створив цей плагін jQuery, щоб вирішити подібну проблему, в якій я мав централізований контейнер (табличні дані), і я хотів, щоб заголовок закріпився вгорі сторінки, коли список прокручувався, але я хотів, щоб він був прив’язаний табличні дані, щоб воно було куди б я не помістив контейнер (по центру, ліворуч, праворуч), а також дозволяв йому переміщатися ліворуч та праворуч зі сторінкою, коли прокручується по горизонталі.

Ось посилання на цей плагін jQuery, який може вирішити цю проблему:

https://github.com/bigspotteddog/ScrollToFixed

Опис цього плагіна такий:

Цей плагін використовується для закріплення елементів у верхній частині сторінки, якби елемент прокручувався з поля зору, вертикально; однак це дозволяє елементу продовжувати рухатися вліво або вправо горизонтальною прокруткою.

З огляду на опцію marginTop, елемент перестане рухатися вертикально вгору, як тільки вертикальна прокрутка досягне цільового положення; але елемент все одно буде рухатися горизонтально, оскільки сторінка прокручується вліво або вправо. Після того, як сторінка буде прокручена назад вниз, пройшла цільове положення, елемент буде відновлено у вихідне положення на сторінці.

Цей плагін був протестований у Firefox 3/4, Google Chrome 10/11, Safari 5 та Internet Explorer 8/9.

Використання для вашого конкретного випадку:

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

Мені довелося це зробити з рекламою, яку мій клієнт хотів сидіти поза зоною вмісту. Я просто зробив наступне, і це спрацювало як шарм!

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

Два елементи HTML та чистий CSS (сучасні браузери)

Дивіться цей приклад jsFiddle. Змініть розмір і подивіться, як нерухомі елементи навіть рухаються з плаваючими елементами, на яких вони перебувають. Використовуйте саму внутрішню смугу прокрутки, щоб побачити, як прокрутка буде працювати на сайті (нерухомі елементи залишаються нерухомими).

Як багато тут вже говорилося, один ключ не встановлює будь - яких позиційні настройки на fixedелементі (немає top, right, bottomабо leftзначення).

Швидше, ми ставимо всі нерухомі елементи (зверніть увагу на те, як в останньому полі є чотири з них) спочатку у вікні, де вони повинні бути розміщені, наприклад:

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

Тоді ми використовуємо margin-topта margin-left"переміщуємо" їх по відношенню до свого контейнера, щось подібне, як це робить CSS:

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

Зауважте, що оскільки fixedелементи ігнорують усі інші елементи макета, то в кінцевому контейнері у нашій скрипці може бути декілька fixedелементів та все-таки є всі ті елементи, пов’язані з лівим лівим кутом. Але це справедливо лише в тому випадку, якщо всі вони розміщені першими в контейнері, оскільки ця порівняльна скрипка показує, що, якщо вона розпорошена в межах вмісту контейнера, позиціонування стає недостовірним .

Чи є обгортка статичною , відносною чи абсолютною в позиціонуванні, це не має значення.

Ви можете спробувати мій плагін jQuery, FixTo .

Використання:

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

Ще одне дивне рішення для досягнення відносної фіксованої позиції - перетворення вашого контейнера в рамку, таким чином ваш фіксований елемент може бути зафіксований у вікні перегляду контейнера, а не на всій сторінці.

З чистим CSS вам не вдається це зробити; принаймні, я цього не зробив. Однак ви можете зробити це з jQuery дуже просто. Я поясню свою проблему, і з невеликою зміною ви можете її використовувати.

Отже, для початку я хотів, щоб мій елемент мав фіксовану верхівку (зверху вікна) та лівий компонент, який успадковуватиметься від батьківського елемента (адже батьківський елемент по центру). Щоб встановити лівий компонент, просто поставте свій елемент у батьківський і встановіть position:relativeдля батьківського елемента.

Тоді вам потрібно знати, на скільки зверху знаходиться ваш елемент, коли смуга прокрутки знаходиться зверху (y нульова прокрутка); знову є два варіанти. По-перше, це статично (якесь число) або вам потрібно прочитати його з батьківського елемента.

У моєму випадку це 150 пікселів від верхньої статики. Отже, коли ви бачите 150, це стільки елемента зверху, коли ми не прокручували.

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

Це легко (відповідно до HTML нижче)

Хитрість полягає в тому, щоб НЕ використовувати верхній або лівий елемент (div) з "position: fix;". Якщо їх не вказано, елемент "фіксований вміст" буде відображатися ВІДНОСНО до елемента, що вкладається (div з "позиція: відносна") ВСТАНОВИТИ відносно вікна браузера !!!

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

Нагорі дозволив мені знайти закриваючу кнопку "X" у верхній частині багато тексту у діві з вертикальною прокруткою. "X" сидить на місці (не рухається з прокрученим текстом, але все-таки переміщується вліво або вправо разом з додаючим контейнером div, коли користувач змінює розмір ширини вікна браузера! Таким чином, він "фіксується" вертикально, але розташований відносно огороджувальний елемент горизонтально!

Перш ніж я працював над цим, "X" прокручувався вгору і з поля зору, коли я прокручував текстовий вміст вниз.

Вибачте за те, що не надаю функцію JavaScript JavaScriptDDD (), але це було б зайвим. Я вирішив тримати це якомога коротше.

Я створив jsfiddle, щоб продемонструвати, як це працює за допомогою перетворення.

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/

У мене те саме питання, один з членів нашої команди дає мені рішення. Щоб дозволити дію виправити положення та відносно інших діл, наше рішення полягає у використанні батьківського контейнера, обгортаючи виправити дів та прокручувати дів.

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

Так, це можливо до тих пір, поки ви не встановите позицію ( topабо leftтощо) свого fixedелемента (все ж ви можете використовувати marginдля встановлення відносної позиції). Саймон Бос писав про це деякий час тому .

Однак не сподівайтеся, що фіксований елемент буде прокручуватися з нефіксованими родичами.

Дивіться демонстрацію тут .

Я щось подібне робив ще назад. Я був досить новим у JavaScript, тому я впевнений, що ти можеш зробити краще, але ось вихідний момент:

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

Вам потрібно буде встановити свою ширину, і тоді вона отримує ширину вікна і змінює поле кожні кілька секунд. Я знаю, що це важко, але це працює.

Це можливо, якщо ви використовуєте JavaScript. У цьому випадку плагін jQuery Sticky-Kit :

Мій проект - .NET ASP Core 2 MVC Angular 4 шаблон з Bootstrap 4. Додавання "sticky-top" в основний компонент додатка html (тобто app.component.html) у перший рядок працювало так:

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

Це конвенція чи я це спрощував?

При використанні position:fixedправила CSS і спробувати застосувати top/ left/ right/ bottomце положення елемента щодо вікна.

Щоб обійти проблему використання marginвластивостей замість top/ left/ right/bottom

Перевір це:

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