Description

While examining the "Scroll To Top Examples" page, I spotted an inconsistency in the positioning of the button. Expected at the bottom right of Setup section container, it appeared at the bottom right of the entire page due to a CSS positioning conflict. The position attribute of the absolute class was being overridden by the .mud-scroll-to-top class.

To resolve this and avoid future issues, I strengthened the specificity of several position attributes by adding !important in the _position.scss file:

.absolute {
    position: absolute !important;
}

.fixed {
    position: fixed !important;
}

.relative {
    position: relative !important;
}

.static {
    position: static !important;
}

.sticky {
    position: sticky !important;
}

How Has This Been Tested?

1. Automated Testing: Ran all related unit tests, all of which passed successfully.
2. Manual Testing: Verified the corrected positioning and functionality of the button on the "Scroll To Top Examples" page within the designated container.

Types of changes

• Bug fix (non-breaking change which fixes an issue)

Visual Demonstrations

To provide clearer context:

Before the Fix:

After the Fix:

Checklist:

• The PR is submitted to the correct branch (dev).
• My code conforms to the project's code style.
• I've introduced relevant tests.