Меняет ли относительное положение, как работает ссылка на часть страницы?

Question

У меня проблема с веб-сайтом, над которым я работаю, когда ссылка на элемент с id="example" идет немного дальше вниз по странице. Я думаю, что это может быть потому, что я установил position: relative; и top: 100px;. Это у меня проблема, и если да, то как бы это исправить / обойти?

Answer 1

Насколько я понял вопрос, может быть два случая.

1) Вы либо ссылаетесь на какой-то элемент на той же странице.

Проверьте, есть ли в вашем коде id = "# example" . Если он есть, удалите id = "# example" из этого элемента, и он не будет go в этом месте.

Чтобы узнать больше о ссылки на той же странице веб-документа, пожалуйста, прочитайте:

https://www.computerhope.com/issues/ch000049.htm

2) Или это может повлиять на позицию : относительно ; top: 100px проблема. который сдвигает элемент (к которому применяется CSS) 100px вниз от его нормального положения.

Go к следующей ссылке, чтобы узнать больше о позиционировании в CSS:

https://dzone.com/articles/css-position-relative-vs-position-absolute введите описание ссылки здесь

Проверьте оба сценария ios в своем коде и, надеюсь, это решит вашу проблему :)

Answer 2

Да, верно, браузер прокручивает страницу вниз, чтобы соответствовать верхнему краю поля. Свойство top перемещает верхний край, поэтому это происходит.

Быстрое и грязное исправление padding-top

p,
h2 {
  height: 50000px;
  border: 1px solid red;
}

h2 {
  padding-top: 100px;
}

<a href="#h2">Go to the h2</a>

<p> p tag </p>

<h2 id="h2">The h2</h2>

Answer 3

Да, это так. Если бы вы установили верх в 0px, элемент был бы в верхней части страницы.