Как подвинуть body на любом сайте чтобы сверху внедрить интерфейс расширения для браузера?

Question

[ChernovGV]

Для расширения необходим видимый на странице интерфейс, планирую его разместить над страницей. Доступ к DOM и CSS у меня есть, но не могу сообразить, как это дело сверстать?

Сверху часто есть липкие шапки, которые тоже прятать не хочется, т.е. просто сделать свою липкую шапку не вариант.
Делать отступ для bоду тоже кажется плохой идеей т.к. найдутся сайты у которых свой отступ, и перезаписывать его опасно.

У кого есть идеи?

Answer 1

[Alex]

Если по простому:


Если по сложнее: то нужно с помощью JS получать значение отступа и увеличивать его на нужную вам величину.

Comments

[ChernovGV]

Липкие шапки с position: fixed останутся на своем месте =(

[Alex]

ChernovGV, Поправил ответ. Тогда можно использовать transform: translate

[ChernovGV]

Alex, отлично! Для пущей безопасности, на тот случай если у подопытного сайта уже есть transform: translate у боди, можно JS считывать transform: translate, и корректировать его на высоту панели...
Все ровно, думаю будут проблемы

Answer 2

[Алексей Ярков]

Сделайте свой див так, чтобы можно было менять ему размер мышкой и перетаскивать на странице. А уж пользователь сам разместит как ему удобно.

Comments

[ChernovGV]

Да, думаю это не плохая идея

Answer 3

[irishmann]

Зачем тебе двигать body? В любом месте создай div, навесь на него CSS и все.

Comments

[ChernovGV]

Какой css накинуть, чтобы гарантированно не перекрывать контент сайта (в т.ч. и липкую шапку)?

[irishmann]

ChernovGV, как тов. Алексей Ярков советует