Position: fixed; — фиксирует элемент не на экране, а в родительском блоке. Как исправить?

Question

[smit1987]

Никогда такого не видел.. O_o
position: fixed; - фиксирует элемент не на экране, а в родительском блоке! Т.е. прокручивается вместе с ним. Чет даже не понимаю, как с этим бороться?..

Comments

[Froggyweb]

сложно искать черную кошку в темной комнате, особенно, когда ее там нет.

[smit1987]

Показать сейчас не могу, т.к. сайт на локалке. Но мне думается, совсем не много атрибутов могут дать такой эффект. Тут надо тупо знать.

Имею дело вот с этим: https://alvarotrigo.com/fullPage/ru/

Кусок страницы:

spoiler

<div class="section linear  kontakt fp-section bg-loaded active completely" data-bg="http://wp1.q/wp-content/uploads/2020/01/zzxx22.jpg" data-anchor="kontakt" style="height: 449px;" id="pseudoCssId11">

	
<div class="fp-slides"><div class="fp-slidesContainer" style="width: 100%; transition: all 700ms ease 0s; transform: translate3d(0px, 0px, 0px);"><div class="slide kontakt middle center fp-slide fp-table active bg-loaded" data-anchor="kontakt" data-bg="http://wp1.q/wp-content/uploads/2020/01/zzxx22.jpg" style="width: 100%;" id="pseudoCssId10"><div class="fp-tableCell" style="height:449px;">

	<article class="post-62 fullpage-section type-fullpage-section status-publish has-post-thumbnail hentry entry">

		<div class="inner-slide">
			
			<header>
				
								
								
				<div class="entry-meta">
					
					
					
					<span class="edit-link"><a class="post-edit-link" href="http://wp1.q/wp-admin/post.php?post=62&amp;action=edit">Edit</a></span>				
				</div>

			</header>

			<div class="entry-content">
				<div class="smt-hom-block smt-hom-block1">
<div class="smt-hom-block-a">
<p>sec12</p>
<p>			<a>кнопка модального окна</a></p>
<div class="smt-hom-cont2">
<div class="smt-hom-cont2-a">
<div role="form" class="wpcf7" id="wpcf7-f46-p62-o1" lang="ru-RU" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/fullpage/%d0%bc%d0%b0%d1%81%d1%82%d0%b5%d1%80-%d0%b4%d0%b5%d0%bd/#wpcf7-f46-p62-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="46">
<input type="hidden" name="_wpcf7_version" value="5.1.6">
<input type="hidden" name="_wpcf7_locale" value="ru_RU">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f46-p62-o1">
<input type="hidden" name="_wpcf7_container_post" value="62">
</div>
<p><span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="Ваше имя" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required smt-form-name1" aria-required="true" aria-invalid="false"></span><br>
<span class="wpcf7-form-control-wrap tel-281"><input type="tel" name="tel-281" value="Телефон" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel smt-form-tel1" aria-required="true" aria-invalid="false"></span><br>
<input type="submit" value="Отправить" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>
</div>
</div></div>
<p></p></div>
			</div>

		</div>

	</article>

</div></div></div></div><!-- .slide -->

	

</div>

Answer 1

[Ivan Bogachev]

Без кода сложно говорить, но третий глаз подсказывает, что скорее всего у родительского блока задано свойство transform, filter или will-change. Уберите его и все встанет на свои места.

Comments

[smit1987]

Показать сейчас не могу, т.к. сайт на локалке. Но мне думается, совсем не много атрибутов могут дать такой эффект. Тут надо тупо знать.

В одном из родительских блоков есть:
transition: all 700ms ease 0s;
transform: translate3d(0px, 0px, 0px);
Прямо там проверить не получается- скрипт всё возвращает на место. Может можно сделать что-то в промежуточных блоках?

Имею дело вот с этим: https://alvarotrigo.com/fullPage/ru/

Кусок страницы:

spoiler

<div class="section linear  kontakt fp-section bg-loaded active completely" data-bg="http://wp1.q/wp-content/uploads/2020/01/zzxx22.jpg" data-anchor="kontakt" style="height: 449px;" id="pseudoCssId11">

	
<div class="fp-slides"><div class="fp-slidesContainer" style="width: 100%; transition: all 700ms ease 0s; transform: translate3d(0px, 0px, 0px);"><div class="slide kontakt middle center fp-slide fp-table active bg-loaded" data-anchor="kontakt" data-bg="http://wp1.q/wp-content/uploads/2020/01/zzxx22.jpg" style="width: 100%;" id="pseudoCssId10"><div class="fp-tableCell" style="height:449px;">

	<article class="post-62 fullpage-section type-fullpage-section status-publish has-post-thumbnail hentry entry">

		<div class="inner-slide">
			
			<header>
				
								
								
				<div class="entry-meta">
					
					
					
					<span class="edit-link"><a class="post-edit-link" href="http://wp1.q/wp-admin/post.php?post=62&amp;action=edit">Edit</a></span>				
				</div>

			</header>

			<div class="entry-content">
				<div class="smt-hom-block smt-hom-block1">
<div class="smt-hom-block-a">
<p>sec12</p>
<p>			<a>кнопка модального окна</a></p>
<div class="smt-hom-cont2">
<div class="smt-hom-cont2-a">
<div role="form" class="wpcf7" id="wpcf7-f46-p62-o1" lang="ru-RU" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/fullpage/%d0%bc%d0%b0%d1%81%d1%82%d0%b5%d1%80-%d0%b4%d0%b5%d0%bd/#wpcf7-f46-p62-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="46">
<input type="hidden" name="_wpcf7_version" value="5.1.6">
<input type="hidden" name="_wpcf7_locale" value="ru_RU">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f46-p62-o1">
<input type="hidden" name="_wpcf7_container_post" value="62">
</div>
<p><span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="Ваше имя" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required smt-form-name1" aria-required="true" aria-invalid="false"></span><br>
<span class="wpcf7-form-control-wrap tel-281"><input type="tel" name="tel-281" value="Телефон" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel smt-form-tel1" aria-required="true" aria-invalid="false"></span><br>
<input type="submit" value="Отправить" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>
</div>
</div></div>
<p></p></div>
			</div>

		</div>

	</article>

</div></div></div></div><!-- .slide -->

	

</div>

[Rustam Bainazarov]

smit1987, вышеперечисленные свойства из ответа отменяют действие position: fixed.

Так как вы сами сказали, что у какого-то родителя есть вот это:
transform: translate3d(0px, 0px, 0px);

…это значит, что нужно убрать это свойство. Либо выносить элемент за пределы этого родителя. Иных путей нет.

А тот код, что вы прислали (HTML) к вопросу не имеет отношения.