Question

我正在使用带有UI UI样式的Angular2和AngularFire2构建一个todo应用程序。在应用程序的一部分，材料工具提示显示在div后面。

HTML

                <div class="view">
                    <input class="toggle" type="checkbox" (click)="toggleTodoComplete(todo)" [checked]="todo.completed">
                    <input type="text" class="todoEditable" [class.important]="todo.important"
                           (keyup.enter)="updateTitle(todo, $event)" value="{{todo.title}}">
                    <div class="todoActions">
                        <img class="todoAction tooltip" md-tooltip="Alert" tooltip-position="below"
                             src="../../assets/img/add_alert.svg"
                             (click)="toggleModal(todo, 'addAlertModal')"/>
                        <img class="todoAction tooltip" md-tooltip="Photo" tooltip-position="below"
                             src="../../assets/img/insert_photo.svg"
                             (click)="toggleModal(todo, 'addPhotoModal')"/>
                        <img class="todoAction tooltip" md-tooltip="Location" tooltip-position="below"
                             src="../../assets/img/location.svg"
                             (click)="toggleModal(todo, 'addDescriptionModal')"/>
                        <img class="todoAction tooltip" md-tooltip="Remove" tooltip-position="below"
                             src="../../assets/img/remove.svg" (click)="removeTodo(todo)"/>
                    </div>
                </div>
                <div class="todoDetails"> <!-- *ngIf="todo.showDetails" -->
                    <div class="todoDetailsDescription">
                        <textarea placeholder="Add Description..." class="descriptionTextArea" [(ngModel)]="todo.description" (keyup.enter)="updateDescription(todo)">
                        </textarea>
                    </div>
                    <div *ngIf="todo.photoUrl" class="todoDetailsPhoto">
                        <img src="{{todo.photoUrl}}"/>
                    </div>
                </div>

样式

.todoDetails {
    z-index: -1 !important;
}

.todoDetailsDescription {
    width: 80%;
    height: 85px;
    margin: 4% auto;
    text-align: center;
    z-index: -1 !important;
}

.todoDescription textarea {
    font-size: 1em;
    margin: 1% 3%;
    min-width: 90%;
    max-width: 90%;
    padding: 1%;
    min-height: 65px;
    max-height: 65px;
    border: none;
    background: #f2f2f2;
    z-index: -1 !important;
}

.todoActions {
    float: right;
    display: flex;
    flex-direction: row;
    width: 210px;
    z-index: 10000 !important;
}

.todoAction {
    display: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin: 10px;
    transition: color 0.2s ease-out;
    z-index: 10000 !important;
}

抓屏

因此，正如您所看到的，todoActions div中分配了工具提示的img标记显示在todoDetails div后面。我怎样才能将我的工具提示显示在todoDetails / todoDescription div之前？

Answer 1

z-index是相对于兄弟元素的，因此，如果其父容器（.view）落后于.todoDetails，则为.todoActions提供高z-index将无法帮助您。

无法查看完整代码的工作情况，不能说100％，但我认为以下规则可行：

.view{
   position:relative; z-index:1;
}
.todoDetails{
   position:relative; 
   z-index:-1 !important;
}

Angular Material UI工具提示显示在div后面

1 个答案: