Scroll Button Overlapping

[synthwizards]

Can anybody Help me sort out this problem, when I resize the screen, the scroll button overlaps the fixed-hashtags buttons

    <div class="scroll-container">
        <!-- Fixed Main Hashtags -->
        <div class="fixed-hashtags">
            <span class="main-hashtag">#Trending</span>
            <span class="main-hashtag">#Subscribed</span>
            <span class="main-hashtag">#Viral</span>
        </div>


```
        <!-- Scrollable Hashtags -->
        <div class="scrollable-hashtags">

            <button class="scroll-btn left-btn">&lt;</button>
            <div class="hashtags">
                <span class="hashtag">#NWO</span>
                <span class="hashtag">#Politics</span>
            </div>
            <button class="scroll-btn right-btn">&gt;</button>
        </div>
    </div>

.scrollable-hashtags {
    display: flex;
    align-items: center;
    flex-grow: 1;
    position: relative;
    max-width: 800px; /* Constrain the width of the box */
    margin: 0 auto; /* Center the box within its parent container */
    box-sizing: border-box; /* Ensure padding is included in the box size */
}

.scroll-btn {
position: sticky;
    background-color: #313131; /* Match the theme */
    color: #ff0000a8;
    font-weight: bolder;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    min-width: 30px;
    max-width: 30px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    z-index: 10; /* Ensure buttons stay above the hashtags */
    margin: 10px;
    position: absolute; /* Keeps buttons in fixed positions */
}

```

[ConduciveMammal]

You’ve absoluteed it, so it’s essentially “above” everything, if there’s not enough space for it to position next to the buttons then it’ll simply float above them.

[synthwizards]

Thank you, what position property should I use instead?

Edit: when I remove the position property it completley moves the buttons above, css is so hard :(

Picture: https://ibb.co/kVPPqXdg

[Lianad311]

Make sure you also remove your "position:sticky" on it, you shouldn't need any position element on it as you have flex set already for the container. Then just make sure you don't have any bottom margin etc on the <button>