htmlcss

Set MAP button at the top of the Filter button and remove fixed position in CSS

I have the following page: link , that has a blue button fixed at the bottom center in mobile/tablet view:

enter image description here

<div class="map-view map-view-mobile">
    <a href="javascript:void(0);">
         <span class="stt-icon stt-icon-map"></span>
                        Harta                    </a>
</div>

@media screen and (max-width: 991px) {
{
    .search-result-page.layout6 .st-results .map-view-mobile
    {
        display: flex;
    }
}
.search-result-page.layout6 .st-results .map-view-mobile
{
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    z-index: 9;
}
.search-result-page.layout6 .st-results .map-view-mobile a
{
    background: #3B71FE;
    border-radius: 50px;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #fff;
    padding: 10px 19px;
    display: flex;
    align-items: center;
}

I would like to set it above the Filter button and show only on top, removing fixed position.

I tried to set it to relative position, but then it appear on bottom of the page.

Solution

  • position: fixed pins the blue “Map” button to the viewport, so it will always sit at the bottom.
    Changing it to position: relative won’t move it to the top it will just place the element back into normal document flow where it currently is in the DOM (which happens to be near the bottom).

    If you want the Map button above the “Filter” button and not fixed:

    1. Put both controls in the same toolbar/container and either move the Map button before the Filter button in the HTML or change their order with Flexbox.

    2. Remove the fixed positioning properties for mobile.

    Also, in your screenshot there’s an extra { after the @media line — remove it so the media rule applies.

    If the Map button and the Filter button are not siblings (i.e., not in the same container), you can’t reorder them with CSS alone. In that case either move the element in the HTML, or do it once with JS.

    If you also want the whole toolbar to stick to the top while scrolling (not fixed to viewport bottom), make the toolbar sticky.**
    **
    Try to remove position: fixed, ensure the element is placed before Filter (DOM order or order), and fix the extra { in your media query.