未占用空间中的额外元素选择框（HTML/JS/CSS w/Angular.js）

Question

I have some elements that are created an ng-repeat, where the elements are highlighted when the mouse pointer hovers over the main div element, and a lightbox appears when an element is clicked. The only problem is that there is some space directly below each element, though not directly touching each element, where if I hover the cursor changes to a pointer cursor, and if I click the light box appears. Also, this is causing a scroll bar to appear as if there were actually elements there. Here's a picture:

Since the cursor doesn't appear in screenshots I had to draw it in in paint sorry for the awful artistry. As you can see, the pointer cursor has appeared, and when I click that empty area I get:

Which is obviously not the intended behavior. Here is the template for the tab that this is happening at:

<div class="container-fluid col-md-12 learning-container" id="badge-popup-container">
        <!-- First Row -->
        <div class="row">
            <!-- Track Progress Display -->
            <div class="col-md-1"></div>
            <div class="col-md-4" id="track-progress-div">
            <h3 class="tile-header">Track - {{currentTrack}}</h3>
            <br>
            <span id="progress-text">Progress</span>
            <span id="progress-number-text"> {{trackProgress}}% </span>
            <md-progress-linear md-mode="determinate" value="{{trackProgress}}" id="track-progress-bar"></md-progress-linear>
        </div>

        <!-- Recent Badge Display -->
        <div class="col-md-7"></div>
    </div>

    <br>

    <!-- Second Row -->

    <div class="row">
        <!-- Your Badges --->
        <div class="col-md-1"></div>
        <div id="badges-div" class="col-md-10">
            <h3 class="tile-header" id="badge-display-title">Your Badges</h3>
            <div class="badges-table">
                <div ng-repeat="badge in earnedBadges" class="table-badge-div" ng-click="showBadge($event, badge)">

                    <img ng-src="images/{{badge.image}}" class="badge-card-image">
                    <div class="badge-card-bottom">
                        <p class="badge-card-title">{{badge.name}}</p>
                    </div>
                    <p class="badge-card-points"><b>{{badge.points}}</b></p>
                    <p class="badge-card-date"><b>{{badge.earnedDate}}</b></p>
                    <img src="images/all_white.png" class="badge-highlight-image">
                </div>
            </div>

            <div class="col-xs-1"></div>
        </div>

    </div>
</div>

Direct your attention to the second row, which is where the problem is occurring. Notice there is an image called all_white, which is a white transparent picture that is displayed over the card on hover to highlight the card.

The browser is chrome, if that makes a difference.

Why might this erroneous selection box be appearing? what can I do to get rid of it?

CSS As Requested.

Whoops I put the wrong CSS at first. Here.

Also, when I inspect the empty space, it points to the table-badge-div div. So that's the element that the browser thinks is in the empty space.

th {
    height: 20px;
}

#new-badge-button {
    margin-top: 14px;
    color: #5998ff;
}

#track-progress-div {
    box-sizing: border-box;
    background: linear-gradient(to bottom left, #adc9f7, #f2f6fc);
    height: 138px;
}

#recent-badge-div {
    box-sizing: border-box;
    background: linear-gradient(to bottom left, #adc9f7, #f2f6fc);
    height: 138px;
    border-style: solid;
    border-color: #fced7e;
    border-width: medium;
    border-radius: 18px;
}

#recent-badge-img {
    padding: 0px;
    max-width: 65px;
    min-width: 55px;
}

#badge-description-text {
    margin-top: 1.2em;
    background: linear-gradient(to bottom left, #fcfdff, #f2f6fc);
    border-sizing: border-box;
    border-radius: 8px;
    height: 40px;
}

#recent-badge-header {
    margin-top: 18px;
}

#new-badge-button {
    width: 5px!important;
}


#completed-courses-div {
    box-sizing: border-box;
    background: linear-gradient(to bottom left, #adc9f7, #f2f6fc);
    border-left-style: solid;
    border-left-width: thin;
    border-left-color: rgba(80, 80, 80, .2);
    height: 400px;
}

#badges-div {
    box-sizing: border-box;
    background: linear-gradient(to bottom left, #adc9f7, #f2f6fc);
    height: 400px;
    padding: 0px;
}



#progress-text {
    color: rgba(50, 50, 50, .7);
}


.tile-header {
    font-family: "Times New Roman", Times, serif;
    color: rgba(25, 25, 25, .8);

}

#progress-number-text {
    position: absolute;
    right: 15px;
    color: rgba(50, 50, 50, .8);
}


/* Completed Table --- Shows recently completed courses*/
.completed-table tr, .completed-table td {
    box-sizing: border-box!important;
}


.completed-table {
    height: 300px;
    overflow-y: auto;
    background: linear-gradient(to top right, rgba(200, 200, 200, .2), rgba(150, 150, 150, .1));
}

.completed-odd {
    background-color: rgba(255, 255, 255, .2);
}


.badges-table {
    height: 300px;
    overflow-y: auto;
    padding: 0px;
    width: 100%;
    background: linear-gradient(to top right, rgba(200, 200, 200, .2), rgba(150, 150, 150, .1));
}

.badge-info-div {
    width: 100%;
}

.badge-img {
    min-width: 60px;
    width: 13%;
    padding-left: 2%;
}

.badge-name {
    min-width: 140px;
    width: 20%
}

.badge-earned {
    min-width: 95px;
    width: 20%;
}

.badge-description {
    padding-right: 30px;
    width: 35%;
    font-size: 12px;
}

.badge-points {
    width: 10%
}

.badges-odd {
    background-color: rgba(255, 255, 255, .2);
}

.badge-table-image {
    height: 58px;
}

.recently-completed-img {
    min-width: 60px;
    width: 13%;
    padding-left: 2%
}

.completed-table-image {
    height: 50px;
}

.recently-completed-name {
    width: 43%;
}

.recently-completed-date {
    width: 42%;
}

.learning-table-head {
    height: 20px!important;
    color: #164084;
}

.learning-table-head tr {
    height: 20px!important;
}

.learning-table-head td {
    height: 20px!important;
}

.learning-table-body td {
    height: 70px;
}

.table-badge-div {
    margin-top: 30px;
    margin-left: 30px;
    box-sizing: border-box;
    display: inline-block;
    width: 190px;
    height: 80%;
    background: linear-gradient(to bottom left, #5b5b5b, #adadad);
    box-shadow: 7px 7px 5px 10px rgba(80, 95, 119, .4);
}

.table-badge-div:hover {
    cursor: pointer;
}


.badge-card-bottom {
    margin-top: 22px;
    width: 100%;
    height: 57px;
    padding: 0px;
    background-color: #efdc2b;
}

.badge-highlight-image {
    opacity: 0;
    position: relative;
    width: 100%;
    height: 100%;
    bottom: 301px;
}

.badge-highlight-image:hover {
    opacity: .2;
}

.badge-card-image {

    display: block;
    margin: auto;
    width: 70%;
    margin-top: 30px;
}

.badge-card-points {
    color: #fffdf4;
    position: relative;
    bottom: 238px;
    left: 5px;
}

.badge-card-title {
    font-family: Georgia, serif;
    font-size: 17px;
    text-align: center;
    padding-top: 16px;
    color: #827846;
}

.badge-card-date {
    position: relative;
    bottom: 108px;
    left: 103px;
    color: #aaaaaa;
}

/* ------ Badge Dialog --------*/

#badge-dialog {
    border-radius: 0px;
    height: 190px;
    width: 450px;
    background-color: #efdc2b;
    overflow: hidden;
}

#badge-dialog-div {
    height: 190px;
    overflow: hidden;
}

#badge-dialog-div:hover {
    cursor: initial;
}

#badge-dialog-image-div {
    width: 190px;
    height: 190px;
    background: linear-gradient(to bottom left, #5b5b5b, #adadad);
}

#badge-dialog-image {
    width: 133px!important;
    height: 163px;
    display: block;
    margin: auto;
    width: 70%;
    padding-top: 30px;
}

#badge-dialog-description {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    width: 250px;
    position: absolute;
    top: 50px;
    left: 205px;
    font-size: 16px;
}

#badge-dialog-title {
    position: absolute;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    text-align: left;
    top: 0px;
    left: 205px;
    color: #fffdf4;
}

#badge-dialog-points-title {
    position: absolute;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #fffdf4;
    left: 210px;
    top: 100px;
}

#badge-dialog-points {
    position: absolute;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    left: 213px;
    top: 140px;
}

#badge-dialog-earned {
    position: absolute;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    top: 140px;
    left: 301px;
}

#badge-dialog-earned-title{
    position: absolute;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #fffdf4;
    top: 100px;
    left: 300px;
}

/* ------ Media Querys ------- */

@media (max-width: 1158px) {
    #badge-description-text {
        font-size: 11px;
    }
}

Answer 1

Seems like the problem was the highlight image, since when I set display: none on it, the scroll bar thing disappeared.

As a solution, I set position:relative on the repeated table-badge-div elements, and position:absolute and bottom:0px on the transparent highlight-image. It should work fine now.

.table-badge-div {
    position:relative; /* Added this */
    margin-top: 30px;
    margin-left: 30px;
    box-sizing: border-box;
    display: inline-block;
    width: 190px;
    height: 80%;
    background: linear-gradient(to bottom left, #5b5b5b, #adadad);
    box-shadow: 7px 7px 5px 10px rgba(80, 95, 119, .4);
}

.badge-highlight-image {
    opacity: 0;
    position: absolute; /* Added this */
    width: 100%;
    height: 100%;
    bottom: 0px; /* Changed this */
}

Plunker: https://plnkr.co/edit/sRZWpsQ1DmBoKKwSiGBS?p=preview