How to show html table always on top

Question

I am creating table

#myUL li a {
  background-color: #f6f6f6;
  padding: 5px;
  width: 100%;
  text-decoration: none;
  font-size: 14px;
  color: black;
  display: block;
}

#myUL li a.header {
  background-color: #e2e2e2;
  cursor: default;
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

<input type="text" id="myInput" list="myUL" onclick="openingList()" onkeyup="openingList()" style="width:90%; ">
<ul id="myUL" hidden=true>
  <li>
    <a href="#"></a>
  </li>
</ul>

On click of input tag is myUL is opening. Now I implemented this on the top of some box. Now the problem is when I am clicking, myUL is not displaying fully because it is getting hide because of box. How Can show this always on top.

Note :

Applying z-index is also not working.
Typing in input is also not working.

Can anybody help me to fix this.

check the CSS structure of this https://stackoverflow.com/questions/29732488/how-to-get-a-drop-down-menu-to-overlay-other-elements — Thirueswaran Rajagopalan, Jul 04 '17 at 09:02

score 1 · Answer 1 · answered Jul 04 '17 at 09:53

1

You should use z-index,however, it works with (position:absolute, position:relative, or position:fixed)
So You have to add Position attribute to your #myUL li a style

answered Jul 04 '17 at 09:53

M. Ewees

41
3

score 0 · Answer 2 · answered Jul 04 '17 at 09:02

0

add

#myUL li a {
    position: absolute;
}

answered Jul 04 '17 at 09:02

Jeremy Danner

65
1
7

1

How can you describe it? – Nirav Joshi Jul 04 '17 at 09:04

How to show html table always on top

2 Answers2