1

height:x; width:y; overflow:auto;記事のコンテンツを表示する div があります。当然のことながら、コンテンツが div の制約を超えると、スクロールバーが表示され、すべてのコンテンツを読むことができます。

position: absolute; top: 20px; right: 20px;div には、 div を閉じるための「x」を表示する「閉じる」リンクが含まれています (jQuery とアニメーションを使用)。問題は、記事をスクロールすると、「x」も一緒にスクロールすることです。「x」をコンテンツに合わせて移動するのではなく、同じ位置にとどめたい。

位置の値を「固定」に変更しようとしましたが、div ではなくページの本文に固定されます。メインコンテンツの外にdivを配置せずにこれを克服するにはどうすればよいですか?

<div class="box1">
  <a data-type="close">X</a>
  <div class="inner">
      //content//
  </div>
</div>
4

3 に答える 3

1

ラッパー div を内側のスクロール div と同じサイズにして追加position:relative;します。次に、閉じるボタンをラッパー div 内に完全に配置し、z-index を増やして内側の div の上に配置します。

例

コード (あなたの html に基づく):

.box1 {
    position:relative;
    height:100px;
    width:200px;
}

.inner {
    width:200px;
    height:100px;
    background:#f2f2f2;
    overflow:auto;
}

a {
    top:0;
    right:0;
    position:absolute;
}
于 2013-08-16T12:17:22.193 に答える
1

overflow: auto;私があなたを正しく理解していれば、あなたはこれを行うことができることをすでに知っていますが、.innerdivに配置することが唯一の方法だと思います:

.box1 {
    background: yellow;
    width: 200px;
    height: 200px;
    position: relative;
}
.inner {
    overflow: auto;
    height: 100%;
}
a[data-type="close"] {
    position: absolute;
    top: 0;
    right: -10px;
}

http://jsfiddle.net/36U4R/

于 2013-08-16T12:21:03.807 に答える
0

タグを閉じるときに位置を適用:

<a data-type="close" style="position:fixed;">X</a>

この助けを願っています

于 2013-08-16T12:12:18.880 に答える