html - 如何防止绝对定位元素的垂直重叠？

Question

问题

在创建具有绝对定位的产品的可滚动 div 后(避免使用固定高度)，垂直最小化浏览器时出现问题。一旦用户最小化浏览器并且视口(viewport)大小小于或等于 700px，ul 和元素开始重叠它们的相邻元素。

绝对定位的原因和过去的 Action

在 ul 上使用绝对定位之前，它的样式由 float: left 和 height: 100% 组成，但不幸的是，固定了 100% 负面影响元素的高度，适合他们这样他们就可以填满100%的区域。例如，当所有元素都在两行时，它们之间的大间隙会自动创建，在删除 height: 100% 后，间隙消失了，但是 ul 不再可以垂直滚动了。所以我尝试使用绝对定位，一开始似乎是完美的选择。

相关的 HTML

这些都是与问题相关的 html。

<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>

问题结果

请查看Fiddle它是 embedded result查看问题的视觉效果。

解决方案

问题的原因可能是什么？有没有比使用绝对定位更好的方法？可以固定高度吗？我可以在应用固定高度时删除间隙吗？如果不是，这个问题怎么解决？

Answer 1

您始终可以为顶级 CSS 规则使用固定常量，例如 250px。然后，除了媒体查询之外，您还可以为您的 ul 元素决定不同的最高值。