CODEWITHSUNDEEP
htmlcss
LeonardBuchanon
LeonardBuchanon

Reputation: 33

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

I am 'newish' to CSS and HTML5 I have 2 problems with the following script

  1. The cursor:pointer; shown in #someDiv is shown as a pointer when hovering over #anotherDiv and #someLinesDiv

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

Upvotes: 3

Views: 11753

Answers (1)

CRABOLO
CRABOLO

Reputation: 8793

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

Upvotes: 4

Related Questions