Solution to CSS anchor positioning being blocked by the top fixed navigation bar

Many websites have a navigation bar fixed at the top to facilitate users to search and jump to other pages.

At the same time, in order to facilitate users to browse long documents, a table of contents will be added. Click on the paragraph title to jump to the location of the paragraph.

As shown in the figure:

If you use anchors to jump to a directory, you may encounter the problem that the fixed navigation bar covers the title.

1. Anchor Positioning Mechanism

If there is no scroll bar, the anchor is invalid.

If there is a scroll bar, the scroll bar scrolls to the top edge of padding-box of the anchor element corresponding to the address hash (the content after the # sign in the address).

2. Solution

Example

Example source code

Sample online preview

(1) padding + margin

Padding affects the positioning of anchor elements, while margin does not affect the positioning of anchor elements. Therefore, padding is used to adjust the position of the anchor element after jumping, and margin is used to offset the impact of padding on the layout.

<h3 class="heading first" id="first">
    1. Different time and place of appearance</h3>

.first {
    padding-top: 60px;/* 60px is the height of the navigation bar*/
    margin-top: -60px;
 } 

advantage

This solution does not require adding additional elements, the problem can be solved directly using CSS.

shortcoming

When the document level of a heading is inconsistent with that of a paragraph, it can cause other elements to be obscured.

For example: The title uses relative positioning to elevate the document hierarchy. The mouse will be unable to select the paragraph above the title that is blocked by the layout, resulting in the inability to copy the document.

(2) Use span or a tag as an anchor element

padding of non-replaced inline elements does not affect the layout, but can affect the anchor position.

<h3 class="heading">
    <span id="second" class="title_placeholder">
    2. require/exports is dynamically loaded at runtime, import/export is statically compiled</span>
</h3>

.title_placeholder {
    padding-top: 60px;
} 

shortcoming

Same as solution (1)

(3) Dark anchor point

Add a blank anchor element that does not affect the layout above the element that needs to be positioned.

Because the position of the anchor point after jumping will fall on the upper edge of the element's padding-box , setting height affects the anchor point position, and setting margin-top offsets the impact of the dark anchor on the layout.

<div class="dark_anchor" id="third"></div>
<h3 class="heading">
    3. require/exports outputs a copy of a value, while import/export modules output a reference to a value</h3>

.dark_anchor {
    height: 60px;
    margin-top: -60px;
} 

advantage

Does not affect mouse selection of other elements

shortcoming

In this solution, margin of the positioned element will affect the position of the anchor after it jumps, which is inconsistent with directly setting the title as the anchor element.

For example: the title (positioned element) has a 20px margin, and the 20px margin is still retained after the anchor point jumps. If you want the title to be pinned to the top without being affected by margin after the anchor point jumps, use this solution with caution.

(4): target pseudo-class

The :target CSS pseudo-class represents a unique page element (the target element) whose id matches the current URL fragment.

4. Inconsistent usage

:target {
    padding-top: 60px;
    margin-top: -60px;
  } 

This solution is similar to solution (1). When jumping to a certain anchor point (class), the anchor point element applies the :target style.

:target browser compatibility:

3. References

URL anchor HTML positioning technology mechanism, application and problems

Pure CSS to achieve up and down offset when the internal anchor point of the web page jumps

When the anchor point encounters fixed positioning

This is the end of this article about the solution to the problem of CSS anchor positioning being blocked by the top fixed navigation bar. For more related content about CSS anchor positioning being blocked by the top fixed navigation bar, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!