2

固定パネル内に絶対項目を追加しようとしています。私のhtmlは次のようなものです:

<ul>
<li><a href="#">test</a>
<div class="popup">Popup</div>
</li>
</ul>

CSS :

ul
{
position:fixed;
left:10px;
top:0;
min-height:100%;
width:80px;
overflow:hidden;
background-color:#ccc;
color:#fff;
z-index:0;
}
ul li
{
position:relative;
}

.popup
{
width:400px;
border:1px solid #000;
display:none;
position:absolute;
color:#000;
z-index:1001;
}

私の問題はオーバーフロー動作です。オーバーフローを無効にすると、ポップアップはうまく機能しますが、絶対位置でもポップアップは非表示になります。ul タグ内に多くのコンテンツがある場合、スクロール効果を管理するためにオーバーフロー動作が必要です。私はすでにliに相対位置を追加しようとしましたが、静的な高さ、幅、最小幅、最小高さを追加しようとしました...他の投稿でそうしましたが、問題は解決しませんでした。コードは次のとおりです。http://jsfiddle.net/jbval/SCzuu/

誰かがアイデアを持っている場合。

ご協力いただきありがとうございます。

JB

4

2 に答える 2

2

汚い修正は、ポップアップ クラスの位置を絶対にしてから、幅と高さのプロパティを設定し、オーバーフローすることです。

 position:absolute;
 width:400px;
 height:400px;
 overflow:auto;

http://jsfiddle.net/zcKbd/

または、前の回答で述べたようにposition: fixed;、ポップアップ クラスに追加します。

于 2013-04-04T10:04:14.007 に答える
0
  • popupも固定にしてみてはいかがでしょうか。以下を参照してください。

    .popup{ position:fixed; }

これがフィドルです

http://jsfiddle.net/jm3Qh/

于 2013-04-04T10:00:57.137 に答える