Mam sytuację, w której w normalnych warunkach CSS ustalony element div zostałby umieszczony dokładnie tam, gdzie jest określony ( top:0px
, left:0px
).
Wydaje się, że nie jest to respektowane, jeśli mam rodzica, który ma transformate3d. Czy ja czegoś nie widzę? Wypróbowałem inne opcje transformacji webkit, takie jak style i transform origin opcje, ale nie miałem szczęścia.
I dołączony JSFiddle z przykładu I gdzie oczekiwany żółtą pole być w narożniku górnej strony, a nie wewnątrz elementu pojemnika.
Poniżej znajduje się uproszczona wersja skrzypiec:
#outer {
position:relative;
-webkit-transform:translate3d(0px, 20px , 0px);
height: 300px;
border: 1px solid #5511FF;
padding: 10px;
background: rgba(100,180,250, .8);
width: 80%;
}
#middle{
position:relative;
border: 1px dotted #445511;
height: 300px;
padding: 5px;
background: rgba(250,10,255, .6);
}
#inner {
position: fixed;
top: 0px;
box-shadow: 3px 3px 3px #333;
height: 20px;
left: 0px;
background: rgba(200,180,80, .8);
margin: 5px;
padding: 5px;
}
<div id="container">
Blue: Outer, <br>
Purple: Middle<br>
Yellow: Inner<br>
<div id="outer">
<div id="middle">
<div id="inner">
Inner block
</div>
</div>
</div>
</div>
Jak mogę sprawić, by translate3d działało z dziećmi o ustalonej pozycji?
html
css
css-position
css-transforms
Juan Carlos Moreno
źródło
źródło
Odpowiedzi:
Dzieje się tak, ponieważ
transform
tworzy nowy lokalny układ współrzędnych, zgodnie ze specyfikacją W3C :Oznacza to, że ustalone położenie zostaje ustalone na przekształconym elemencie, a nie na rzutni.
Obecnie nie ma rozwiązania, o którym jestem świadomy.
Jest to również udokumentowane w artykule Erica Meyera: Un-Fixing Fixed Elements with CSS Transforms .
źródło
Miałem migotanie na moim stałym górnym pasku nawigacyjnym, gdy elementy na stronie korzystały z przekształcenia, następujące elementy zastosowane do mojej górnej nawigacji rozwiązały problem przeskakiwania / migotania:
Dzięki tej odpowiedzi na SO
źródło
Jak zasugerował Bradoergo, po prostu weź okno
scrollTop
i dodaj je do absolutnej górnej pozycji, na przykład:To i tak działało dla mnie.
źródło
W przeglądarkach Firefox i Safari można używać
position: sticky;
zamiast,position: fixed;
ale nie będzie działać w innych przeglądarkach. Do tego potrzebny jest javascript.źródło
position:fixed
a i tak będzie działać zgodnie z oczekiwaniami.sticky
gdy jest już obsługiwany przez główne przeglądarki: caniuse.com/#feat=css-stickysticky
może być rozwiązaniem, działa w nowoczesnej przeglądarce.Moim zdaniem najlepszą metodą radzenia sobie z tym jest zastosowanie tego samego tłumaczenia, ale zerwanie dzieci, które muszą zostać naprawione, z ich elementu nadrzędnego (przetłumaczonego); a następnie zastosuj translację do elementu div wewnątrz
position: fixed
opakowania.Wyniki wyglądają mniej więcej tak (w twoim przypadku):
JSFiddle: https://jsfiddle.net/hju4nws1/
Chociaż może to nie być idealne w niektórych przypadkach użycia, zazwyczaj jeśli naprawiasz element div, prawdopodobnie nie obchodzi Cię, który element jest jego elementem nadrzędnym / gdzie znajduje się w drzewie dziedziczenia w Twoim DOM i wydaje się, że rozwiązuje większość problemów - jednocześnie pozwalając jednocześnie na jedno
translate
i drugieposition: fixed
w (względnej) harmonii.źródło
Natknąłem się na ten sam problem. Jedyną różnicą jest to, że mój element z atrybutem „position: fixed” miał ustawione właściwości stylu „top” i „left” z JS. Więc udało mi się zastosować poprawkę:
Obiekt oRect będzie zawierał rzeczywiste (względem portu widoku) górne i lewe współrzędne. Możesz więc dostosować swoje rzeczywiste właściwości oElement.style.top i oElement.style.left.
źródło
Mam pasek boczny poza płótnem, który używa -webkit-transform: translate3d. To uniemożliwiało mi umieszczenie stałej stopki na stronie. Rozwiązałem problem, kierując na klasę na stronie html, która jest dodawana do tagu podczas inicjalizacji paska bocznego, a następnie pisząc kwalifikator css: not o stanie „-webkit-transform: none;” do tagu html, gdy tej klasy nie ma w tagu html. Mam nadzieję, że to pomoże komuś z tym samym problemem!
źródło
Spróbuj zastosować odwrotną transformację do elementu potomnego:
źródło
Dodaj klasę dynamiczną podczas transformacji elementu.
$('#elementId').addClass('transformed')
. Następnie zadeklaruj w css,następnie
następnie
Teraz,
position: fixed
gdy zostaną dostarczone z wartościami właściwości atop
iz-index
elementu podrzędnego, po prostu działają dobrze i pozostają stałe, dopóki element nadrzędny nie ulegnie transformacji. Kiedy transformacja zostanie cofnięta, element potomny wyskakuje jako naprawiony ponownie. Powinno to złagodzić sytuację, jeśli faktycznie używasz bocznego paska nawigacji, który otwiera się i zamyka po kliknięciu, a masz zestaw zakładek, który powinien pozostać lepki podczas przewijania strony.źródło
Jednym ze sposobów rozwiązania tego problemu jest zastosowanie tej samej transformacji do stałego elementu:
źródło