HTML and CSS z-index and cursor:pointer not working correctly

css, html

Solution

1) The reason your other divs are cursor: pointer is because they are inherenting that from their parent #someDiv. The children inherent all the properties of the parent if not overridden. So to overide that property add the following:

#someDiv:nth-child(1n) {
   cursor: default;
}

2) You can not have the parent div appear above the children div with a higher z-index. Z-index is used to have sibling elements appear above or below the other siblings. You can not use z-index for child-parent relationships.

For example if you had

<ul>
<li class="appearabove">
<li>
<li>
</ul>

You could have the li with class="appearabove" appear ontop of the other li's if they overlap by doing

.appearabove { z-index: 1; }

considering the li tag has the default 0 z-index.

Let's say I want to change the ul to appear above the li like this

ul { z-index: 9999; }

It doesn't work, because ul is the parent of li.

EDIT: children can have an unlimited amount of parents, and parents can have an unlimited amount of children , and siblings can have an unlimited amount of siblings

<div id="a">
    <div id="b"></div>
    <div id="c">
        <div id="d">
            <div id="e">
                <div id="f"></div>
                <div id="g"></div>
            </div>
        </div>
    </div>
</div>

#a is a parent of #b, #c, #d, #e, #f, #g   #a is a child of no one (although it would be a child of the body tag, and html tag)
#b is a parent of no one.                  #b is a child of #a
#c is a parent of #d, #e, #f, #g           #c is a child of #a
#d is a parent of #e, #f, #g               #d is a child of #a and #c
#e is a parent of #f, #g                   #e is a child of #a, #c, #d
#f is a parent of no one                   #f is a child of #a, #c, #d, #e
#g is a parent of no one                   #g is a child of #a, #c, #d, #e

#f and #g are siblings
#b and #c are siblings

Problem

I am 'newish' to CSS and HTML5 I have 2 problems with the following script The cursor:pointer; shown in #someDiv is shown as a pointer when hovering over #anotherDiv and #someLinesDiv The z-index does not appear to work correctly - #someDiv should be above the other divs I would really appreciate some help as it is driving me Crazy :) Thanks in advance JS Fiddle Here HTML ``` <body> <table id="AlphaTable"> <tbody> <tr> <td> <div id=topLevelDiv> <div id="someDiv" /> <div id="anotherDiv"> <div> <div id="anotherDivOval" /></div> </div> <div id="someLinesDiv"> <div id="someLinesDivTopLine" /> <div id="someLinesDivBottomLine" /></div> </div> </td> </tr> </tbody> </table> ``` CSS ``` #AlphaTable { position: relative; } #topLevelDiv { position: relative; z-index: 1; } #someDiv { position: absolute; top: 0px; left: 0px; height: 18px; width: 30px; z-index: 40; background-color: orange; cursor:pointer; } #anotherDiv { position: absolute; top: 10px; left: 10px; height: 18px; width: 30px; background-color: white; z-index: 2; } #anotherDivOval { position: absolute; top: 4px; left: 3px; width: 20px; height: 8px; border-style: solid; border-radius: 50%; border-width: 1px; border-color: black; border-collapse: collapse; /*background-color: yellow;*/ } #someLinesDiv { position: absolute; top: 0px; left: 35px; height: 18px; width: 30px; border-collapse: collapse; background-color: yellow; } #someLinesDivTopLine { position: absolute; left: -5px; top: -19px; width: 30px; height: 30px; border: 1px solid black; border-color: transparent transparent black transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 30px; border-bottom-right-radius: 0px; background-color: yellow; } #someLinesDivBottomLine { position: absolute; left: -1px; top: 22px; width: 30px; height: 30px; border: 1px solid black; border-color: black transparent transparent transparent; border-top-left-radius: 30px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; /*background-color: yellow;*/ } #AlphaTable { position: relative; } #AlphaTable th { position: relative; } #AlphaTable tr { position: relative; } #AlphaTable td { position: relative; } ```

Original source