Layering Css Blocks Clicks

I have a page that looks like this: 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 accompl

Solution 1:

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.

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