How to prevent vertical overlap on absolute positioned element?

Question

Problem

After creating scrollable div of products with absolute positioning (to avoid use of fixed height), Problems have occurred when minimizing browser vertically. Once user minimizes browser and viewport size is less than or equal to 700px, ul and elements start to overlap their adjacent elements.

Reason for absolute positioning and past actions

Before using absolute positioning on ul, It's style consisted of float: left and height: 100%, But unfortunately, Fixed height of 100% negatively affected elements, Fitting them so they could fill up 100% of area. For example, when all elements were on two rows, the large gap between them was automatically created, After removing height: 100%, gap disappeared, However ul wasn't vertically scrollable anymore. So i tried to use absolute positioning which seemed to be perfect choice at first.

Relevant HTML

These is all relevant html to the problem.

<div class="item_addition" style="position: fixed;overflow-y: auto;width: 80%;height: 95%;left: 0;right: 0;margin-left: auto;margin-right: auto;min-width: 250px;top: 2%;background-color: black;border: 2px solid white;opacity: 1;z-index: 999;overflow-y: hidden;">
    <div style="position: relative;top:0;left:0;width:100%;height:10%;">
        <div onclick="close_menufuncs()" style="font-size:2em;margin-top: 2%;margin-right: 2%;font-family:'Lato';color: white;cursor: pointer;float: right;">X</div>
        <div style="font-size:2em;margin-top: 2%;margin-left: 2%;font-family:'Lato';color: white;float: left;">Add Items</div>
    </div>
    <p style="float: left;font-size: 1.5em;float: left;color: white;font-family: 'Lato';width: 100%;padding-left: 2%;">Steam Inventory</p>
    <div style="float: left;width:100%;height: 8%;min-height: 60px;display: block;">
        <form id="rel_inv" name="item_addition" action="/account/" method="post" style="margin: 0;">
        {% csrf_token %}
        <input type="hidden" name="reloadinv" value="inventory_reload"></input>
        <div onclick="javascript:document.getElementById('rel_inv').submit();" name="reload_inv" style="float: left;width: 60px;height: 60px;cursor: pointer;text-decoration:none;display: block;"><img src="/static/Home/images/reload_i.png" style="width: 30px;height: 30px;margin-top: 25%;margin-left: 25%;"></div>
        </form>
        <div style="margin: 0;float: left;width: 60px;height: 60px;cursor: pointer;text-decoration:none;display: block;padding: 0;"><input class="sendtrade" type="submit" value="Send Offer" style="-webkit-border-radius: 0;-webkit-margin-before: 0;-webkit-margin-after: 0;-webkit-appearance: none;height: 30px;-webkit-appearance: none;border: 1px solid white;-webkit-border-radius: 5px;border-radius: 3px;color: white;background-color: #333333;transition: all 0.3s ease;-moz-transition: all 0.3 ease;cursor: pointer;margin-top: 25%;"></div>
        <div style="margin: 0;float: left;width: 60px;height: 60px;text-decoration: none;display: block;-webkit-appearance: none;padding: 0;-webkit-padding-before: 0;-webkit-padding-after: 0;"><input id="filter_inv" type="text" style="-webkit-border-radius: 0;-webkit-margin-before: 0;-webkit-margin-after: 0padding: 0;-webkit-appearance: none;font-family: 'Lato';height: 30px;margin-top: 25%;margin-left: 50px;" placeholder="Search for specific item..."></div>
    </div>
    <ul class="add_invent" style="position: absolute;margin: 0;left: 0;top: 35%;right: 0;bottom: 0;display: flex;flex-wrap: wrap;width:100%;overflow-y: scroll;-webkit-overflow-scrolling: touch;justify-content: center;list-style-type: none;">
    {% for item in steam_inventory %}
        <li class="inv_lst">
            <label class="inv_items2" style="background-color:black;cursor: pointer;text-align: center;padding-top: 0;user-select: none;-webkit-user-select: none;-ms-user-select: none;moz-user-select: none;margin: 0;"><img style="width: 90%;height: 80%;display: inline-block;margin-top: 10%;user-select: none;-webkit-user-select: none;-ms-user-select: none;moz-user-select: none;" src="{{ item.icon_url }}"></img></label>
            <label class="add_invent_p" style="color: white;word-wrap: break-word;font-family: 'Lato';font-size: 1em;">{{ item.name }}</label>
        </li>
    {% endfor %}
    </ul>
    <script>
        var lis = document.getElementsByClassName('inv_lst');
        var input = document.getElementById('filter_inv');
        input.onkeyup = function () {
            var filter = input.value.toUpperCase();
            if ( filter.length > 0 ) {
                var lis = document.getElementsByClassName('inv_lst');
                for (var i = 0; i < lis.length; i++) {
                    var name = lis[i].getElementsByClassName('add_invent_p')[0].innerHTML;
                    if (name.toUpperCase().indexOf(filter) == 0) {
                        lis[i].style.display = 'list-item';
                    }
                    else {
                        lis[i].style.display = 'none';
                    }
                }
            }
            else {
                $('.add_invent li').css("display", "list-item")
            }
        }
    </script>
</div>

<style>
    .inv_items2 {
        border:1px solid white;
    }
    .add_invent li {
        margin-right: 50px;
        margin-bottom: 50px;
        position: relative;
        float: left;
        clear: both;
        width: 120px;
        height: 120px;
    }
    .add_invent label {
        display: block;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        moz-user-select: none;
    }
    .add_invent li label:last-child {
      background-color: rgba(0, 0, 0, 0.8);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: 120px;
      width: 120px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .add_invent_p {
        visibility: hidden;
    }
    .add_invent li:hover > .add_invent_p {
        visibility: visible;
    }
    .inv_items2 {
        width: 120px;
        height: 120px;
    }
</style>

Result of problem

Please check Fiddle and it's embedded result to see the visual of problem.

Solution

What could the cause of the problem be? Is there any better way than usage of absolute positioning? Can it be done with fixed height? Can i remove the gap when fixed height is applied? If not, how could this problem be solved?

Answer 1

You can always use a fixed, constant for your top CSS rule such as 250px. Then, alongside media queries, you can decide on different top values for your ul element.