Text Overlapping Items in Dropdown Items

Overlap Text on Dropdown Menu

Based on @AgataB answer, I have found another nice solution. Instead of I change the z-index of the content, I change the z-index of dropdown.

.dropdown {
    position: relative;
    display: inline-block;
    z-index: 1;
}

Now, the content is not overlapping the dropdown, and the draggable is still working.

Text overlapping items in Dropdown items

To help directly solve your question, I'll need to see your HTML and CSS. But in general IE7 has a known issue with z-index and how it calculates z-index for children elements.

There are several Stackoverflow questions around this issue. Here are some that could help:

IE7 Z-Index issue - Context Menu

expanding the menu appearing underneath the gallery in IE7

The general idea is that in IE7, z-index is calculated at the parent element of siblings. That sounds a little odd so here's an example:

<div id="parent1">...</div>
<div id="parent2">...</div>

If .parent1 has something like a UL menu that overlaps .parent2, it could be possible that .parent2 appears in front of that content no matter what z-index any child element of .parent1 has.

This is because IE7 compares the z-index of .parent1 and .parent2 and will make all children elements inherit their value, in a sense. (child elements actually get their own z-index context related to each other. But children of other parent elements are influenced by their parent first, in relation to child of other parents)

The solution is to find the 2 elements that are causing the problem and find where they share parent elements that are siblings of each other.

Then apply proper z-index on those elements.

.parent1{ z-index:10; }
.parent2{ z-index:1; }

If you post your HTML I can try to help find your exact issue.

Cheers!

Prevent the dropdown menu overlap the div below just push it

Using absolute positioning will not regard for content underneath. With that being said, you have to use position: relative; on your dropdown menu in order to allow the input or any other content below to adjust when the menu opens.

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.container{
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.dropContainer{
  display: block;
  height: 100%;
  margin-bottom: 2rem;
}

.inputContainer{
  display: block;
  height: 100%;
  position: sticky;
}

 /* dropDown Menu */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: relative;
  background-color: #f1f1f1;
  min-width: 160px;
  padding-bottom: 140px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.show {display: block; }

<div class="container">
    <div class="dropContainer">
      <div class="dropdown">
      <button onclick="myFunction()" class="dropbtn">Dropdown</button>
        <div id="myDropdown" class="dropdown-content">
          <a href="#home">Home</a>
          <a href="#about">About</a>
          <a href="#contact">Contact</a>
        </div>
      </div>
    </div>
    <div class="inputContainer">
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname" />
    </div>
</div>

Expanded dropdown overlapping existing items/text

Issue has bee fixed by adding two atribute in css style .parent

position: relative;
z-index: 10000;

CSS drop down menu sub-items overlapping

You need your .sub_menu to be absolute, not your li as. That's it!

.sub_menu {
    position:absolute;          
}

Working demo here: http://jsfiddle.net/pxzhqqnb/1/

And I'd make the .sub_menu hidden instead of its children. Personal preference, but I think it makes more sence.

Why does it happen?
Consider this simple example: (think of .relative as position: relative and .absolute as position: absolute)

<div class="relative">
    Text
    <div class="absolute">Link 1</div>
    <div class="absolute">Link 2</div>
</div>

Link 1 is absolute. It searches for the closest relative element. That's .relative. Now Link 1 gets right under the relative div.
Link 2 follows the same rules, thus both links overlap.

Now let's change the code a little:

<div class="relative">
    Text
    <div class="absolute-wrapper">
        <div>Link 1</div><!-- these are now static by default -->
        <div>Link 2</div>
    </div>
</div>

absolute-wrapper is absolute, so it searches for the closest .relative element and gets right under it. Now both links are normal elements wrapped in a div, so they render as expected.

Demo of both examples here: http://jsfiddle.net/w0h7cdhe/2/

Overlapping of dropdown menu with another item

First, your menu is overlapping your content area because it does not understand who goes first in the stream, since your submenu is absolutely positioned. To fix this, just declare a position to your #menu container and add a z-index of something like 9999 to position it above everything else.

#menu {
    position:relative;
    z-index:9999;
}

As for your second issue, the submenu items are inheriting the height of your main menu items, which is 100 pixels, simply declare a height:auto to your submenu li items to fix this.

ul.topnav li ul.subnav li {
    height: auto;
}

EDIT::

Fiddle

http://jsfiddle.net/andresilich/ehNrE/6/

---

Related Topics