Краткий ответ: нет (теперь это возможно с помощью преобразования 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.

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

Настройте все, как если бы вы хотели position: absolute внутри контейнера position: relative, а затем создать новый 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>

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

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

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

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

-webkit-transform: translateZ(0);

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

Итак, я провел небольшое исследование и обнаружил, что проблема уже была рассмотрена Eric Meyer, и даже если это было похоже на" уловку ", оказалось, что это часть спецификаций:

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

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

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

Но...

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

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

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

ТЕСТ

Ответ - да, если вы не установили left: 0 или right: 0 после того, как вы установили позицию div на fixed.

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, пока элемент не будет прокручен за пределы определенного смещения, и в этом случае он превратится в position: fixed. Когда он прокручивается назад, он возвращается в свое предыдущее (относительное) положение.

2. Он влияет на поток других элементов на странице, т.е. занимает определенное место на странице (как position: relative).

3. Если он определен внутри некоторого контейнера, он позиционируется относительно этого контейнера. Если у контейнера есть переполнение (прокрутка), в зависимости от смещения прокрутки он превращается в position: fixed.

Поэтому, если вы хотите достичь фиксированной функциональности, но внутри контейнера, используйте липкий.

Просто удалите верхний и левый стили из 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 элементов, но все эти элементы по-прежнему относятся к левому верхнему углу. Но это верно только в том случае, если все они помещаются в контейнер первыми, , поскольку эта скрипта сравнения показывает, что если рассредоточены по содержимому контейнера, позиционирование становится ненадежным.

Является ли оболочка статической, relative или абсолютный в позиционировании, не имеет значения.

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

Использование:

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

Да, это возможно, если вы не устанавливаете позицию (top или left и т. Д.) Вашего fixed элемента (хотя вы все равно можете использовать margin для установки относительной позиции). Саймон Бос некоторое время писал об этом назад.

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

См. демонстрацию здесь.

Заявление об ограничении ответственности:

Это отвечает только на заголовок: Фиксированное положение, но относительно контейнера. Для фактического варианта использования, который пользователь запрашивает, position: sticky - это путь.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

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

Вам просто нужно добавить преобразование в контейнер, и положение фиксированного элемента будет относительно контейнера. Я думаю, что transform: translateX(0); должно быть достаточно.

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

С чистым 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');
});

У меня такая же проблема, один из членов нашей команды предлагает мне решение. Чтобы разрешить фиксированное положение div относительно другого div, наше решение состоит в том, чтобы использовать родительский контейнер, оборачивая фиксированный div и прокручивая 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 ниже)

Уловка состоит в том, чтобы НЕ использовать верхнюю или левую часть элемента (div) с "position: fixed;". Если они не указаны, элемент «фиксированного содержимого» будет отображаться ОТНОСИТЕЛЬНО к включающему элементу (div с «position: relative;») ВМЕСТО относительно окна браузера !!!

<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» прокручивалась вверх и скрывалась из поля зрения, когда я прокручивал текстовое содержимое вниз.

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

Я создал 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/

Когда вы используете position:fixed правило CSS и пытаетесь применить _2 _ / _ 3 _ / _ 4 _ / _ 5_, он позиционирует элемент относительно окна.

Обходной путь - использовать свойства margin вместо _7 _ / _ 8 _ / _ 9 _ / _ 10_

Некоторое время назад я делал что-то подобное. Я был новичком в 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>

Это соглашение или я слишком упрощал это?

Магия состоит в том, чтобы взять ширину экрана за вычетом ширины контейнера и разделить ее на 2:

//1400px is according to container max-width (left can be also right)
.fixed {
  position: fixed;
  right: calc((100vw - 1400px)/2);
}

Примечание: функция css calc () поддерживается почти, но не на 100%. Для большинства случаев использования он определенно поддерживается. Щелкните здесь для получения дополнительных сведений.

Фрагмент (с контейнером 300 пикселей, чтобы он соответствовал виджету этого веб-сайта):

.container {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}


.fixed {
  position: fixed;
  right: calc((100vw - 300px)/2);
}


@media screen and (max-width: 300px) {
  right: 0px;
}

<div style="height: 3000px">
    <div class="container">
        <button class="fixed">
            FIXED CONTENT
        </button>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, eum? Animi quidem accusamus minima vel, dolorem suscipit quia accusantium minus harum modi commodi distinctio! Iste voluptatum earum quam voluptate culpa ad, ipsum dolorum recusandae quis atque eligendi necessitatibus magnam nisi dolores beatae qui? Perspiciatis natus cum nostrum in quod odio sapiente doloremque rerum quo dolore tenetur facere, quisquam atque accusamus fugiat eligendi, deleniti nisi minus recusandae distinctio dignissimos! Dicta quos ipsum qui pariatur at vel veritatis veniam quisquam minus modi et voluptas aliquam laborum, cumque in quo magnam sapiente. Expedita ut dolore laboriosam tempora reprehenderit vero eaque blanditiis, cumque voluptatibus, velit nemo, veniam tenetur quisquam numquam adipisci quae odio repellendus neque incidunt! Cum odio corporis soluta voluptate nesciunt, quasi nobis deleniti neque porro expedita fugiat placeat alias autem pariatur animi error, dicta veritatis atque perspiciatis inventore tempora dolor ad! Mollitia in dolorem ipsam eos porro magni perspiciatis possimus maiores, itaque facere ut. Eos culpa eum error quia incidunt repellendus quam possimus, asperiores earum ipsum molestias dicta sint fugit atque veniam dolorum illo? Officia harum sint incidunt totam, reiciendis illum eos maxime sequi neque repellat quis, expedita eum, corporis quaerat nemo qui soluta aspernatur animi. Sint ad rem numquam omnis sit.
    </div>
 </div>

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

<div class='parent'>
  <div class='child'></div>
<div>

.parent {
  contain: content;
}

.child {
  position: fixed;
  top: 0;
  left: 0;
}

Проверь это:

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