'transform3d' nie działa z pozycją: Stałe Dzieci
Mam sytuację, w której, w normalnych okolicznościach CSS, stały div byłby umieszczony dokładnie tam, gdzie jest określony (top:0px
, left:0px
).
To nie wydaje się być przestrzegane, jeśli mam rodzica, który ma transformację translate3d. Czy ja czegoś nie widzę? Próbowałem innych opcji WebKit-transform, takich jak styl i transform origin, ale nie miałem szczęścia.
DoĹ 'Ä ... czyĹ' em JSFiddle z przykĹ 'adem, gdzie oczekiwaĹ' em şóŠ' tej skrzynki na górny róg strony, a nie wewnątrz elementu kontenera.
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ł z dziećmi o stałej pozycji?
10 answers
Dzieje się tak dlatego, że transform
tworzy nowy lokalny układ współrzędnych, Zgodnie z W3C spec :
W przestrzeni nazw HTML, każda inna wartość niż
none
dla przekształcenia powoduje utworzenie zarówno kontekstu stosu, jak i bloku zawierającego. Obiekt działa jako blok zawierający Potomków o ustalonej pozycji.
Oznacza to, że stałe pozycjonowanie staje się stałe do przekształconego elementu, a nie do punktu widzenia.
Nie ma obecnie wiem o tym.
Jest to również udokumentowane w artykule Erica Meyera: Un-fixing Fixed Elements with CSS Transforms .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-18 15:41:51
Miałem migotanie na mojej naprawionej górnej nawigacji, gdy elementy na stronie używały transformacji, następujące zastosowanie do mojej górnej nawigacji rozwiązało problem ze skokiem/migotaniem:
#fixedTopNav {
position: fixed;
top: 0;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-04-23 10:23:48
Jak zasugerował Bradoergo, po prostu pobierz okno scrollTop
i dodaj go do pozycji absolutnej na górze, jak:
function fix_scroll() {
var s = $(window).scrollTop();
var fixedTitle = $('#fixedContainer');
fixedTitle.css('position','absolute');
fixedTitle.css('top',s + 'px');
}fix_scroll();
$(window).on('scroll',fix_scroll);
To i tak zadziałało.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-31 19:12:36
W Firefoksie i Safari możesz używać position: sticky;
zamiast position: fixed;
, ale nie będzie to działać w innych przeglądarkach. Do tego potrzebujesz javascript.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-14 18:45:53
Moim zdaniem, najlepszą metodą radzenia sobie z tym jest zastosowanie tego samego translate, ale złamanie dzieci, które muszą być naprawione z ich elementu nadrzędnego (przetłumaczonego); a następnie zastosowanie translate do div wewnątrz opakowania position: fixed
.
Wyniki wyglądają mniej więcej tak (w Twoim przypadku):
<div style='position:relative; border: 1px solid #5511FF;
-webkit-transform:translate3d(0px, 20px , 0px);
height: 100px; width: 200px;'>
</div>
<div style='position: fixed; top: 0px;
box-shadow: 3px 3px 3px #333;
height: 20px; left: 0px;'>
<div style='-webkit-transform:translate3d(0px, 20px, 0px);'>
Inner block
</div>
</div>
JSFiddle: https://jsfiddle.net/hju4nws1/
Chociaż może to nie być idealne dla niektórych przypadków użycia, zazwyczaj jeśli naprawiasz div, prawdopodobnie nie dbasz o to jaki element jest jego rodzicem / gdzie spada w drzewie dziedziczenia w Twoim DOM i wydaje się rozwiązać większość bólu głowy - jednocześnie pozwalając zarówno translate
, jak i position: fixed
żyć w (względnej) harmonii.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-04-24 16:30:40
Natknąłem się na ten sam problem. Jedyną różnicą jest to, że mój element z 'position: fixed' miał swoje właściwości stylu 'top' I 'left' ustawione w js. Więc udało mi się zastosować poprawkę:
var oRect = oElement.getBoundingClientRect();
ORect obiekt będzie zawierałrzeczywiste (względem portu widoku) współrzędne górne i lewe. Więc możesz dostosować swój rzeczywisty oElement.styl.top i oElement.styl./ align = "left" /
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-22 12:29:52
Mam pasek boczny OFF canvas, który używa -webkit-transform: translate3d. to uniemożliwiało mi umieszczenie stałej stopki na stronie. Rozwiązałem ten problem, kierując klasę na stronie html, która jest dodawana do tagu przy inicjalizacji paska bocznego, a następnie pisząc kwalifikator css: not do stanu " - webkit-transform: none;" do tagu html, gdy ta klasa nie jest obecna na tagu html. Mam nadzieję, że to pomoże komuś tam z tym samym problemem!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-22 21:19:25
Spróbuj zastosować odwrotną transformację do elementu potomnego:
<div style='position:relative; border: 1px solid #5511FF;
-webkit-transform:translate3d(0px, 20px , 0px);
height: 100px; width: 200px;'>
<div style='position: fixed; top: 0px;
-webkit-transform:translate3d(-100%, 0px , 0px);
box-shadow: 3px 3px 3px #333;
height: 20px; left: 0px;'>
Inner block
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-06 13:59:02
Dodaj klasę dynamiczną podczas transformacji elementu.$('#elementId').addClass('transformed')
.
Następnie przejdź do zadeklarowania w css,
.translat3d(@x, @y, @z) {
-webkit-transform: translate3d(@X, @y, @z);
transform: translate3d(@x, @y, @z);
//All other subsidaries as -moz-transform, -o-transform and -ms-transform
}
Then
#elementId {
-webkit-transform: none;
transform: none;
}
Then
.transformed {
#elementId {
.translate3d(0px, 20px, 0px);
}
}
Teraz position: fixed
gdy są dostarczane z top
i z-index
wartości właściwości elementu potomnego działają poprawnie i pozostają stałe, dopóki element nadrzędny nie zmieni się. Gdy transformacja zostanie cofnięta, element potomny zostanie ponownie naprawiony. Powinno to złagodzić sytuację, jeśli faktycznie używasz paska bocznego nawigacji, który przełącza otwieranie i zamykanie na Kliknij, a masz zestaw zakładek, który powinien pozostać lepki podczas przewijania strony w dół.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-30 19:08:19
Jednym ze sposobów radzenia sobie z tym jest zastosowanie tej samej transformacji do elementu stałego:
<br>
<div style='position:relative; border: 1px solid #5511FF;
-webkit-transform:translate3d(0px, 20px , 0px);
height: 100px; width: 200px;'>
<div style='position: fixed; top: 0px;
-webkit-transform:translate3d(0px, 20px , 0px);
box-shadow: 3px 3px 3px #333;
height: 20px; left: 0px;'>
Inner block
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-03 04:07:37