Я пытаюсь исправить это 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. Применяется тот же принцип, но вместо использования margin для смещения вашего контейнера вы можете использовать translateX(-50%). Это не работает с описанным выше трюком на полях, потому что вы не знаете, сколько его смещать, если ширина не фиксирована, и вы не можете использовать относительные значения (например 50%), потому что это будет относительно родителя, а не элемента применительно к. transformведет себя по-разному. Его значения относятся к элементу, к которому они применяются. Таким образом, 50%for transformозначает половину ширины элемента, а 50%для margin - половину ширины родительского элемента . Это решение 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.

Это позволит вам справиться с любым сценарием:

Установите все так, как вы хотите, если вы хотите позиционировать: absolute внутри позиции: относительный контейнер, а затем создайте новую фиксированную позицию div внутри div с помощью position: absolute, но не устанавливайте его свойства top и left. Затем он будет исправлен в любом месте относительно контейнера.

Например:

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

К сожалению, я надеялся, что этот поток может решить мою проблему с помощью Android WebKit, отрисовывающего пиксели с размытыми тенями в виде полей в качестве элементов фиксированной позиции, но, похоже, это ошибка.
Во всяком случае, я надеюсь, что это помогает!

Да, согласно спецификации, есть способ.

Хотя я согласен с тем, что ответ Грэма Блэквуда должен быть принят, поскольку он практически решает проблему, следует отметить, что фиксированный элемент может быть расположен относительно его контейнера.

Я случайно заметил, что при применении

-webkit-transform: translateZ(0);

к телу это сделало фиксированного потомка относительно него (вместо области просмотра). Таким образом, мои фиксированные элементы leftи topсвойства были теперь относительно контейнера.

Поэтому я провел небольшое исследование и обнаружил, что проблема уже была рассмотрена Эриком Мейером, и даже если это показалось «уловкой», оказалось, что это часть спецификаций:

Для элементов, макет которых определяется блочной моделью CSS, любое значение, отличное от none, для преобразования приводит к созданию как контекста стека, так и содержащего блока. Объект действует как содержащий блок для фиксированных позиционируемых потомков.

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

Итак, если вы примените какое-либо преобразование к родительскому элементу, он станет содержащим блоком.

Но...

Проблема в том, что реализация кажется ошибочной / креативной, потому что элементы также перестают вести себя как фиксированные (даже если этот бит не кажется частью спецификации).

Такое же поведение будет обнаружено в Safari, Chrome и Firefox, но не в IE11 (где фиксированный элемент будет оставаться фиксированным).

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

ТЕСТОВОЕ ЗАДАНИЕ

Ответ - да, до тех пор, пока вы не установите left: 0или right: 0после того, как вы установили положение div на фиксированный.

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> 

Div #content будет сидеть там, где сидит родительский div, но будет исправлен там.

Я создал этот плагин 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');

Другое странное решение для достижения относительной фиксированной позиции - преобразование вашего контейнера в iframe, таким образом ваш фиксированный элемент может быть зафиксирован в окне просмотра его контейнера, а не на всей странице.

С чистым CSS вы не можете сделать это; по крайней мере, я этого не сделал. Однако вы можете сделать это с помощью jQuery очень просто. Я объясню мою проблему, и с небольшими изменениями вы можете использовать ее.

Поэтому для начала я хотел, чтобы у моего элемента была фиксированная вершина (сверху окна), а левый компонент наследовал от родительского элемента (потому что родительский элемент центрирован). Чтобы установить левый компонент, просто поместите ваш элемент в родительский и установитеposition:relative для родительского элемента.

Затем вам нужно знать, насколько сверху находится ваш элемент, когда полоса прокрутки находится сверху (у прокручивается ноль); снова есть два варианта. Во-первых, это статическое (некоторое число), или вы должны прочитать его из родительского элемента.

В моем случае это 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 ниже)

Хитрость в том, чтобы НЕ использовать top или left на элементе (div) с «position: fixed;». Если они не указаны, элемент «fixed content» будет отображаться ОТНОСИТЕЛЬНО к включающему элементу (div с «position :lative;») INSTEAD OF относительно окна браузера !!!

<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» в верхней части большого количества текста в div с вертикальной прокруткой. «X» стоит на месте (не перемещается с прокручиваемым текстом, и все же он перемещается влево или вправо с включенным контейнером div, когда пользователь изменяет ширину окна браузера! Таким образом, он «фиксируется» вертикально, но располагается относительно закрывающий элемент горизонтально!

Прежде чем я заработал, «X» прокручивался вверх и исчезал из поля зрения, когда я прокручивал текстовое содержимое вниз.

Извините за то, что не предоставил мою функцию javascript hideDiv (), но это излишне увеличило бы этот пост. Я решил сделать это как можно короче.

Я создал jsfiddle, чтобы продемонстрировать, как это работает, используя transform.

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 fix и относительно другого div, наше решение состоит в том, чтобы использовать контейнер-отец, обернуть div div и scroll.

<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. Добавление «наклейка» в основной компонент приложения 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>