角度の材料のUIのツールチップの後ろに表示

Question

私はマテリアル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; 
} 

Screencapture

だから、あなたが見ることができるよう、でのimgタグdiv352は、todoDetails divの背後に表示されるツールチップを割り当てられたdivです。 todoDetails/todoDescription divの前にツールチップを表示するにはどうすればよいですか？

Answer 1

z-インデックスは兄弟要素に関連しているため、親コンテナ（.view）が.todoDetailsの背後にある場合は、.todoActionsに高いZ-インデックスを付けると役立ちません。

作業完全なコードを表示せずに、100％と言うが、私は次のルールがうまくいくと思うcan't：

悲しいこと

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