Свойство «позиция: фиксированная» не работает. Как установить другого родителя для элемента div.

I AM

Мне нужно переместить элемент div в верхнюю часть веб-страницы.

Я использую этот код, чтобы изменить его положение:

 document.querySelectorAll('div[data-reactid="div_id_here"]')[0].style = "position: fixed; top: 0px;";

Код (разметка): Элемент действительно будет перепозиционирован, но показываться он будет не вверху страницы, а в других местах.

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

Инструкция «позиция: фиксированная», похоже, работает не относительно области просмотра, а относительно этого родительского элемента.

Я читал, что в таких случаях нужно применять «transform: none;» своему родителю.

Я так и сделал, но безуспешно. Мне интересно, можно ли установить для этого div еще одного родителя.

Например, я бы хотел, чтобы тег «body» выступал в качестве его родительского элемента, и я уверен, что тогда я смогу иметь больше контроля над ним. Возможно ли это или какое другое решение вы бы мне порекомендовали?

Спасибо, Александр

5Sasha5

Боюсь, код не работает. Я использую Tampermonkey (https://www.tampermonkey.net

), чтобы внедрить JS в веб-страницы, и вот полный сценарий...

 // ==UserScript==
// @name Reposition section
// @namespace [URL='https://lumtu.com/yti/dl55ldC9odHRwOi8vdGFtcGVybW9ua2V5Lm5V2']http://tampermonkey.net/[/URL]
// @include *finance.yahoo.com/quote/*/analysis*
// ==/UserScript==

var x = document.querySelector('section[data-test="price-targets"]');
x.style.zIndex = 20;
x.style.backgroundColor = 'lightblue';
z.style.position = 'fixed';
z.style.top = 0;
document.body.appendChild(x);

Код (JavaScript): по какой-то причине код больше не выполняется после второй строки. Александр

WaloroAda

Спасибо! Да, работает, хотя мне приходилось проверять это на каком-то другом сайте (с другим элементом). Он изменил расположение контента без каких-либо проблем! Он по-прежнему не работает на Yahoo, но не потому, что что-то не так с вашим скриптом.

Если вы загрузите страницу Yahoo, вы увидите, что «ценовые цели» Раздел загружается через 2-3 секунды после загрузки содержимого страницы. И я думаю именно поэтому раздел не перепозиционируется, хотя я не уверен в этом на 100%. Александр

Ne2pi

Ох, я ошибся, это должно быть x, а не z. Попробуй это:

 var x = document.querySelector('section[data-test="price-targets"]');
x.style.zIndex = 20;
x.style.backgroundColor = 'lightblue';
x.style.position = 'fixed';
x.style.top = 0;
document.body.appendChild(x);

Код (разметка):

Contenthouse

> Не могли бы вы поделиться ссылкой на вашу страницу здесь, пожалуйста?

Конечно, вот оно:

https://finance.yahoo.com/quote/AAPL/analysis

Элемент div, который меня интересует, - это «ценовые цели». На веб-странице он отображается справа и называется «Ценовые цели аналитика».

Тем временем мне удалось найти обходной путь. Это довольно жестоко, но очень эффективно! ;-) Сначала я применил 'видимость: скрыто' свойство в тело документа. Теперь, имея совершенно пустую страницу, я использовал 'для' цикл и применил 'позиция: фиксированная' свойство для ВСЕХ элементов div на странице. Наконец, я изменил положение «ценовые цели» элемент, а также применил 'видимость: видимый' свойство, чтобы сделать его видимым.

Итак, теперь я вижу раздел «Ценовые ориентиры аналитиков», отображаемый вверху страницы (на пустой странице), и он остается там, несмотря ни на что! Если бы я не применял 'позиция: фиксированная' для ВСЕХ элементов div на странице, он когда-нибудь (не каждый раз!) менял свое вертикальное положение, как я сказал в своем первом сообщении.

Если у вас есть более элегантный способ сделать это, дайте мне знать.

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

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

Было бы неплохо сделать страницу пустой (кроме искомого элемента).

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

Александр

Похожие темы	Дата
Jquery Shining Image (codecanyon)	19.12.2024, 05:12
LoftSchool] Быстрый старт в AngularJs	19.12.2024, 05:12
Курс по angularjs	19.12.2024, 05:12
Видео курс "angularjs essential"	19.12.2024, 05:12
Slider Revolution Responsive Jquery Plugin	19.12.2024, 05:12
[Video] JavaScript Object Oriented Programming 2020-4 by Udemy (04:50hrs lessons)	19.12.2024, 05:12
Находим подходящего ребенка и удаляем его	19.12.2024, 05:12
Передача переменной в метод JavaScript RegExp	19.12.2024, 05:12
Помощь по регулярным выражениям	19.12.2024, 05:12
Как выбрать из списка только один объект, содержащий данные, и игнорировать остальные	19.12.2024, 05:12

Свойство «позиция: фиксированная» не работает. Как установить другого родителя для элемента div.

I AM

5Sasha5

WaloroAda

Ne2pi

Contenthouse

I AM

Интересно