0

このスクリーンショットでわかるように、各行に「hi」を含むメニューが本文要素の下と画面上のボタンの下に表示されています。

下に飛び出る

dom構造は次のようになります。

dom構造

開いたときのドロップダウン要素の計算スタイルは次のとおりです。

background-color: transparent;
color: #999;
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
height: 20px;
line-height: 20px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: visible;
overflow-y: visible;
position: relative;
width: 1425px;

ドロップダウンメニューの計算されたスタイルの「上」に表示される項目の1つを次に示します。

box-sizing: border-box;
color: white;
cursor: pointer;
display: inline-block;
height: 22px;
line-height: 17px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
overflow-x: visible;
overflow-y: visible;
vertical-align: middle;
width: 74px;
word-spacing: 0px;

私はこの仕事を正しくするために正しいdom＆cssの魔法を打つことができないようです。ドロップダウンdivのナビゲーションバー内で、dom階層のポジションをプレイしてきました。また、ドロップダウン、ドロップダウンメニュー、およびポップオーバーする要素の両方でz-indexを試してみました。

ここでは見られない根本的なものがあるような気がします。何かご意見は？

4

7 に答える 7

6

私は同様の問題に遭遇しました。nav-collapse要素から'collapse'クラスを削除することで修正できました。

私は実際には問題を詳しく調べませんでしたが、それで問題は解決しました。

于 2012-10-17T03:15:30.593 に答える
4

それを理解した、問題は私がナビゲーションバーにtransform3dを持っていたということでした：

-webkit-transform: translate3d(0, 0, 0);

これを削除すると修正されました。translate3dを削除すると、計算されたナビゲーションバーのスタイルによってz-indexが0からautoに変わることに気付きました。

これが意図された動作であるかどうかわかりませんか？

これが他の誰かの助けになることを願っています。

于 2012-09-29T14:56:37.290 に答える
2

これはz-indexの問題です。

ナビゲーションバーが他の要素よりも高いことを確認してください。

于 2012-09-29T14:49:02.740 に答える
2

同様の問題は、親要素の不透明度が1未満に設定されていることが原因であることがわかりました。

于 2014-11-14T21:15:16.370 に答える
1

親要素にcssを追加します

overflow:visible;
于 2015-01-29T10:49:57.373 に答える
0

ここに投稿された回答を使用して、次のことを行いました...._Layout.cshtmlに追加しました

style = "position：relative; z-index：999;" コンテナのbody-contentdiv（RenderBody（）の直前）に次のようになります。

<div class="container body-content" style="position: relative; z-index: 999; ">
        @RenderBody()
于 2016-07-22T03:57:09.870 に答える
0

確かに、arnirpcが提案したように

-webkit-transform: translate3d(0, 0, 0);

この問題を行います。しかし、Bootstrap Dynamic Pills and Tabsにもドロップダウンがあるため、これを使用する必要がありました。ここで見られる：ドロップダウンのある丸薬

したがって、翻訳を削除すると、ドロップダウンボックスがドロップダウンボタンの上に移動します。これは望ましくありません。

ただし、Bootstrap 4ピルのドロップダウンは、デフォルトでは機能していません。これは、ドロップダウンがTAB-Contentの背後に隠れており、H1、テキスト、または画像のいずれであるかは関係ないためです。

そこで、LI、UL、コンテナなどのコンテンツの多くでz-indexを試しました。何もありません。

私にとっての解決策： この場合、内部コンテンツにz-index-minus-1（またはz-index：-1のクラス）を配置するだけでした。

<div class="tab-content" id="pills-tabContent">
        <div class="tab-pane p-3 fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">

            <div class="row">
                <div class="col-sm-4 z-index-minus-1"> <!-- HERE -->
于 2020-01-25T09:27:03.247 に答える