分层CSS块点击 [英] Layering CSS blocks clicks

问题描述

我有一个类似下面的页面：

I have a page that looks like this:

活动的SORT BY ...按钮和旁边的无效按钮，当我滚动浏览下面的列表时，我不需要滚动。为了完成这个，我有两个并排按钮下降编码如下：

The Active "SORT BY..." button and the inactive button next to it, I needed to not scroll when I scrolled through the list below it. To accomplish this I have the two side by side button drops down codded like this:

<!-- Start Drop Down Menu  -->
    <div class="row" style="height: 300px; width: 100%; position: fixed; top: 74px; background: transparent; z-index:2; overflow: hidden;">

        <div class="col s6">
            <!-- Dropdown Trigger -->
            <a class='dropdown-button btn' href='#' data-activates='dropdown1' style="width: 100%;">Sort By...</a>

            <!-- Dropdown Structure -->
            <ul id='dropdown1' class='dropdown-content'>
                <li><a href="#!">Brewery</a></li>
                <li><a href="#!">Rating</a></li>
                <li><a href="#!">Style</a></li>
            </ul>
        </div>

        <div class="col s6">
            <!-- Dropdown Trigger -->
            <a class='dropdown-button btn disabled' href='#' data-activates='dropdown2' style="width: 100%;"></a>

            <!-- Dropdown Structure -->
            <ul id='none' class='dropdown-content'>
                <li><a href="#!">All</a></li>
                <li><a href="#!">Brewery</a></li>
                <li><a href="#!">Rating</a></li>
                <li><a href="#!">Style</a></li>
            </ul>
        </div>


    </div>

正如你可以在上面代码的Style部分看到的：

As you can see in the Style part of the above code:

style="height: 300px; width: 100%; position: fixed; top: 74px; background: transparent; z-index:2; overflow: hidden;"

我将其定位并将其固定，以便在滚动列表时不会移动。你可能会看到它和伤口为什么我有高度300px当按钮不是那么大...它的原因是当你点击按钮，它打开一个下拉。如果我的高度与按钮的高度相同，那么我可以看到大多数下拉打开....我认为这固定了我的问题，但这导致我的当前问题。因为按钮技术上下降300px它重叠的列表中的前两个条目，使它们不可点击....因为我点击透明css覆盖它们。

I position it and place it fixed so it will not move when I scroll the list below. You may be looking at it and wounder why I have the height 300px when the buttons are not that big...Its because when you click the button it opens a drop down. If I have the height the same height as the button then I can see most of the drop down that open....I thought this fixed my issues but this leads to my current issue. Since the button technically drops down 300px it overlaps the first two entries in the list which makes them not clickable.... causeI am clicking on the transparent css that is covering them up.

对于列表，我添加到这个div与这种风格：

For the list, I am adding that into this div with this style:

<div style="height: 35px; position: relative; top:60px; z-index:1;">
        <div id="replace"> </div>
    </div>

简而言之，如何将下拉式按钮固定到其位置，

In short, how can I have the drop down buttons pin to their location and still be viewable when opened and at the same time still be able to click on all my entries in my list?

推荐答案

您不需要设置您的.row div的高度为300像素。

You should not need to set the height of your .row div to 300px. Instead, remove the overflow:hidden style, which is causing your dropdowns to get cut off.

此外，你应该将你的CSS打破成一个单独的文件，分离出来

Also, you should be breaking your CSS out into a separate file, to separate style from content.

最后，我要补充的是，背景不应该是透明的 - 试试看，你会看到按钮后面的文字滚动。

Finally, I would add that the background should not be transparent - try it, you'll see text scrolling behind the buttons.

.row {
  background: #fff;
  height: 35px;
  width: 100%;
  position: fixed;
  z-index: 10;
}

这篇关于分层CSS块点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！