Zindexが正しく動作しない

私は開発しようとしているウェブサイトを持っています。ウェブサイトの一部は、マウスオーバー時に水平にスライドするスライドアウトメニューを開発することです。私は完全に拡張されたメニューをデフォルトにして、リアルタイムでの開発が容易になるようにしました。う、私は画像をアップロードすることはできませんが、しかしZindexが正しく動作しない

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
@charset "utf-8"; 
/* CSS Document */ 

#sidebar { 
    position: fixed; 
    left: 0; 
    top: 0; 
    background: #151515; 
    width: 250px; 
    height: 100%; 
    z-index: 2; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    display: block; 
    transition: 0.5s; 

} 

#sidebarInfo{ 
    margin: 0px,5px,10px,5px; 
    color: #7E7E7E; 
    width: 100%; 
    height: 50px; 
    position: relative; 
    font-family: allerta, sans-serif; 
    font-size: 9.5px; 
    top: 70%; 
    align-content: center; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
} 

.sidebarLi{ 
    position: relative; 
    margin: 10px; 
    font-size: 28px; 
    color: aliceblue; 
    width: 100%; 
    font-family: allerta, sans-serif; 
} 

.slideMenu{ 
    position:relative; 
    transition:0.4s; 

} 
.menuItem{ 
    position:relative; 
    transition: 0.4s; 
    width: 150px; 
    height: 30px; 
    overflow-x: visible; 
    overflow-y: visible; 
    left: 180px; 
    z-index: 0; 
    color: #000000; 
    background: #FFFFFF; 
} 

</style> 

<title>Caduceus Technologies</title> 

</head> 

<body> 
    <div id="sidebar"> 
     <div class="sidebarLi"> 
      &nbsp;•&nbsp;Home 
     </div> 
     <div class="sidebarLi"> 
      <div class="slideMenu"> 
       &nbsp;•&nbsp;Projects 
       <div class="menuItem"> 
        menuItem1 
       </div> 
      </div> 
     </div> 
     <div class="sidebarLi"> 
      &nbsp;•&nbsp;Resume 
     </div> 
     <div class="sidebarLi"> 
      &nbsp;•&nbsp;Contact 
     </div> 
    </div> 
    <div style="background:#1D1D1D; position: relative; width:1000px; height: 1000px;"> 
     Lorem 
    </div> 
</body> 
</html>

この文書を解析する：このような私のコードで

|--------------|_____________ 
|Menu 1  >|Menu 1 item 1| 
|Menu 2  .|Menu 1 item 2| 
|Menu 3  .|Menu 1 item 3| 
|______________|_____________|

：視覚的な参考

、私はこのような何かを達成しようとしていますZ値がテキスト "メニュー項目"を含むdivが上になるように指示していても、menuItem 1は部分的にしか表示されないことを示しています。何が間違っているのでしょうか？お使い含むsidebar div要素が固定幅を有し、かつoverflow: hiddenを持っている、（menuItem1はありません）、そのコンテナをオーバーフロー何かを隠しているため

出典

2017-05-03 QuestionBansAreStupid

menuItem1の一部が表示されます。

overflow: hiddenを削除してください（ただし、容器があふれています）。

出典

2017-05-03 22:03:37 ash

.menuItemクラスのhiddenプロパティをオーバーライドします。 – QuestionBansAreStupid

これは動作しません。親コンテナには 'overflow：hidden'があるので、そのコンテナをオーバーフローさせるものはすべて隠されます。子要素に 'overflow：visible'を設定すると、オーバーフローする何かを意味するだけで、はるかに小さなコンテナが見えるようになります。親コンテナはまだすべてを隠しています。 – ash

親のオーバーフローを可視にするだけでは、メニューコンテナはスクロールバーを持ちますが、コンテナからメニューを押し出すことはありません。 – QuestionBansAreStupid

Zindexが正しく動作しない

答えて

関連する問題