Stała pozycja, ale względem kontenera

W rzeczywistości jest to możliwe, a przyjęta odpowiedź dotyczy tylko centralizacji, która jest wystarczająco prosta. Również naprawdę nie trzeba używać JavaScript.

To pozwoli Ci poradzić sobie z każdym scenariuszem:

Ustaw wszystko tak, jak chcesz, aby position: absolute wewnątrz kontenera position: relative, a następnie utwórz nowy div o stałej pozycji wewnątrz kontenera div za pomocą position: absolute, ale Nie ustawiaj jego górne i lewe właściwości. Zostanie on naprawiony tam, gdzie chcesz to, w stosunku do pojemnika.

Na przykład:

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

Niestety, miałem nadzieję, że ten wątek może rozwiązać mój problem z Androidem WebKit renderowanie pikseli box-shadow blur jako marginesów na elementach o stałej pozycji, ale wydaje się, że to błąd.
w każdym razie, mam nadzieję, że to pomoże!

Tak, zgodnie ze specyfikacją, jest na to sposób.

chociaż zgadzam się, że Graeme Blackwood powinien być akceptowaną odpowiedzią, ponieważ praktycznie rozwiązuje problem, należy zauważyć, że stały element Może być umieszczony relatywnie do swojego kontenera.

Zauważyłem przez przypadek, że przy stosowaniu

-webkit-transform: translateZ(0);

Do ciała, to stała dziecka względem niego (zamiast viewport). Więc moje stałe właściwości left i top były teraz względne do pojemnika.

Więc zrobiłem trochę badań i okazało się, że problem został już objęty przez Eric Meyer i nawet jeśli czułem się jak "sztuczka", okazuje się, że jest to część specyfikacji:

Dla elementów, których układ jest regulowany przez model pudełkowy CSS, dowolna wartość inny niż żaden dla przekształcenia skutkuje powstaniem ZARÓWNO a kontekst układania i blok zawierający. Obiekt działa jako zawierający blok do stałej pozycji Potomków.

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

Tak więc, jeśli zastosujesz jakąkolwiek transformację do elementu nadrzędnego, stanie się on blokiem zawierającym.

Problem polega na tym, że implementacja wydaje się błędna/kreatywna, ponieważ elementy również przestają zachowywać się jak stałe (nawet jeśli ten bit nie wydaje się być częścią specyfikacji).

To samo zachowanie można znaleźć w Safari, Chrome i Firefox, ale nie w IE11 (gdzie Naprawiono element nadal pozostanie stały).

Inną ciekawą (nieudokumentowaną) rzeczą jest to, że gdy stały element jest zawarty wewnątrz przekształconego elementu, podczas gdy jego właściwości top i left będą teraz powiązane z kontenerem, z poszanowaniem właściwości box-sizing, jego kontekst przewijania rozszerzy się na obramowanie elementu, tak jakby rozmiar pudełka został ustawiony na border-box. Dla niektórych kreatywnych może to być zabawka:)]}

Badanie

Odpowiedź brzmi TAK, O ile nie ustawisz left: 0 lub right: 0 Po ustawieniu pozycji div na fixed.

Http://jsfiddle.net/T2PL5/85/

Checkout the sidebar div. Jest stałe, ale związane z rodzicem, a nie z punktem widoku okna.

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>

Masz position: sticky, który jest nowym sposobem pozycjonowania elementów i jest koncepcyjnie podobny do position: fixed. Różnica polega na tym, że element z position: sticky zachowuje się jak position: relative wewnątrz swojego rodzica, dopóki dany próg przesunięcia nie zostanie osiągnięty w widoku.

W Chrome 56 (obecnie beta od grudnia 2016, stabilna w styczniu 2017) pozycja: sticky powraca.

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

Więcej Szczegółów jest w Stick your lądowanie! stanowisko: sticky lands w WebKit.

Stworzyłem tę wtyczkę jQuery, aby rozwiązać podobny problem, który miałem, gdzie miałem wyśrodkowany kontener (dane tabelaryczne), i chciałem nagłówek, aby naprawić do góry strony, gdy lista była przewijana, ale chciałem, aby zakotwiczone do danych tabelarycznych, więc byłoby tam, gdzie umieścić kontener (wyśrodkowany, w lewo, w prawo), a także pozwolić mu poruszać się w lewo iw prawo ze stroną po przewinięciu w poziomie.

Oto link do tej wtyczki jQuery, która może rozwiązać ten problem:

Https://github.com/bigspotteddog/ScrollToFixed

Opis tej wtyczki jest następujący:

Ta wtyczka służy do mocowania elementów na górze strony, jeśli element przewijałby się poza widok, pionowo; jednak pozwala elementowi na dalsze przesuwanie się w lewo lub w prawo z poziomym przewijaniem.

Biorąc pod uwagę opcję marginTop, element przestanie poruszać się pionowo w górę, gdy pionowe przewijanie osiągnie cel pozycja; ale element będzie nadal poruszał się poziomo, gdy strona jest przewijana w lewo lub w prawo. Po przewinięciu strony w dół do pozycji docelowej, element zostanie przywrócony do pierwotnej pozycji na stronie.

Ta wtyczka została przetestowana w Firefox 3/4, Google Chrome 10/11, Safari 5 i Internet Explorer 8/9.

Użycie w konkretnym przypadku:

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

Po prostu wyjmij styl górny i lewy z div o ustalonej pozycji. Oto przykład

<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 div będzie siedzieć tam, gdzie siedzi rodzic div, ale zostanie tam naprawiony.

Musiałem to zrobić z reklamą, którą mój klient chciał siedzieć poza obszarem treści. Po prostu zrobiłem następujące rzeczy i zadziałało jak urok!

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

Dwa elementy HTML i czysty CSS (nowoczesne przeglądarki)

Zobacz ten przykład jsFiddle. Zmień rozmiar i zobacz, jak elementy stałe poruszają się wraz z elementami pływającymi, w których się znajdują. Użyj najbardziej wewnętrznego paska przewijania, aby zobaczyć, jak przewijanie będzie działać na stronie (stałe elementy pozostają stałe).

Jak wielu tutaj stwierdziło, jeden klucz nie ustawia żadnych ustawień pozycyjnych na elemencie fixed (nie top, right, bottom, lub left wartości).

Raczej stawiamy wszystkie stałe elementy (zauważ, że ostatnie pudełko ma cztery z nich) najpierw w pudełku, z którego mają być umieszczone, jak tak: [17]}

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

Następnie używamy margin-top i margin-left, aby "przenieść" je w stosunku do ich kontenera, tak jak robi to ten CSS:

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

Zauważ, że ponieważ elementy fixed ignorują wszystkie inne elementy układu, końcowy kontener w naszym fiddle może mieć wiele elementów fixed i nadal mieć wszystkie elementy związane z lewym górnym rogiem. Ale jest to prawdą tylko wtedy, gdy wszystkie są umieszczane jako pierwsze w kontenerze , ponieważ to porównanie pokazuje, że jeśli są rozproszone w zawartości kontenera, pozycjonowanie staje się zawodne .

Czy wrapper jest statyczny, względny lub absolutny w pozycjonowaniu nie ma znaczenia.

Możesz użyć właściwości position: sticky.

Oto przykład CODEPEN demonstrujący użycie, a także Czym różni się od position: fixed.

Jak się zachowuje jest wyjaśnione poniżej:

1. Element o lepkiej pozycji jest pozycjonowany na podstawie pozycji przewijania użytkownika. W zasadzie działa jak position: relative, dopóki element nie zostanie przewinięty poza określone przesunięcie, w którym to przypadku zmieni się w position: fixed. Po przewinięciu wraca do poprzedniego (względnego) pozycji.

2. Wpływa na przepływ innych elementów na stronie czyli zajmuje określoną przestrzeń na stronie (podobnie jak position: relative).

3. Jeśli jest zdefiniowany wewnątrz jakiegoś kontenera, jest umieszczony względem tego kontenera. Jeśli kontener ma pewne przepełnienie(przewijanie), w zależności od przesunięcia przewijania zmienia się w pozycję: fixed.

Więc jeśli chcesz osiągnąć stałą funkcjonalność, ale wewnątrz kontenera, użyj sticky.

Możesz spróbować mojej wtyczki jQuery, FixTo .

Użycie:

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

Innym dziwnym rozwiązaniem do osiągnięcia względnej stałej pozycji jest przekształcenie kontenera w ramkę iframe, w ten sposób stały element może być przymocowany do jego widoku kontenera, a nie do całej strony.

Z czystym CSS nie można tego zrobić; przynajmniej ja nie. Jednak można to zrobić z jQuery bardzo prosto. Wyjaśnię mój problem, a przy małej zmianie możesz go użyć.

Więc na początek chciałem, aby mój element miał stałą górę (od góry okna) i lewy komponent do dziedziczenia po elemencie nadrzędnym (ponieważ element nadrzędny jest wyśrodkowany). Aby ustawić lewy komponent, po prostu umieść swój element w rodzicu i ustaw position:relative dla elementu rodzica.

Wtedy ty musisz wiedzieć, ile od góry Twój element jest, gdy pasek przewijania jest na górze (y zero przewijane); istnieją dwie opcje ponownie. Najpierw jest to statyczna (jakaś liczba) lub trzeba ją odczytać z elementu nadrzędnego.

W moim przypadku to 150 pikseli od góry. Więc kiedy widzisz 150 to ile jest element od góry, gdy nie przewijaliśmy.

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

To proste (jak w HTML poniżej)

Sztuką jest nie używać top lub left na elemencie (div) z "position: fixed;". Jeśli nie są one określone, element " fixed content "pojawi się względem elementu zamykającego (div z" position:relative;") zamiast względem okna przeglądarki!!!

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

Powyżej pozwoliło mi zlokalizować zamykający przycisk " X " u góry dużej ilości tekstu w div z pionowym przewijaniem. "X" siedzi na miejscu (nie porusza się przy przewijaniu tekst, a jednak przesuwa się w lewo lub w prawo wraz z załączonym kontenerem div, gdy użytkownik zmieni szerokość okna przeglądarki! W ten sposób jest on" zamocowany " pionowo, ale ustawiony względem elementu obudowy poziomo!

Zanim to uruchomiłem, " X " przewijało się w górę i poza zasięgiem wzroku, gdy przewijałem zawartość tekstu w dół.

Przepraszam, że nie udostępniam mojej funkcji javascript hideDiv (), ale niepotrzebnie wydłużyłoby to ten post. Zdecydowałem się na tak krótki jak możliwe.

Stworzyłem jsfiddle, aby pokazać, jak to działa za pomocą 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/

Mam ten sam problem, jeden z członków naszego zespołu daje mi rozwiązanie. Aby umożliwić pozycję fix Div I względem innych div, naszym rozwiązaniem jest użycie kontenera ojca wrap fix div I scroll div.

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

Css

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

.fix {
  prosition:absolute;
}

Zrobiłem coś takiego jakiś czas temu. Byłem całkiem nowy w JavaScript, więc jestem pewien, że możesz zrobić lepiej, ale tutaj jest punkt wyjścia:

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ędziesz musiał ustawić swoją szerokość, a następnie pobiera szerokość okna i zmienia margines co kilka sekund. Wiem, że jest ciężki, ale działa.

Jest to możliwe, jeśli używasz JavaScript. W tym przypadku wtyczka jQuery Sticky-Kit:

Mój projekt to. net ASP Core 2 MVC Angular 4 template with Bootstrap 4. Dodawanie "sticky-top" do głównego komponentu aplikacji (np.komponent.html) na pierwszym wierszu pracował w następujący sposób:

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

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

Sprawdź to:

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