1

これが（簡略化された）シナリオです。別の div を含む div があります。外側の div は固定サイズで、スクロールバーと相対位置があります。内側の div は外側の div よりも大きく、相対的に配置されます。内側の div を外側の div の上に「浮かせて」完全に表示したい。

このように外側の div のサイズを制限しても意味がないので、これは人為的に聞こえると思います。です。ただし、実際のアプリケーションでは、スクロールバーで制御する必要がある外側の div 内に他のコンテンツがあります。

css だけを使用してこれを行うにはどうすればよいですか? 内側の div は外側の div に対して相対的に配置する必要があるため、position:fixed を使用することはできません。

マークアップ:

  <div id="container">
    <div id="popup">Popup Text</div>
  </div>

CSS:

#container{ 
  overflow: scroll;
  height:50px;
  width:50px;
  position:relative;
}
#popup {
  position:absolute;
  top:20px;
  border:1px solid #000;
  height:100px;
  width:100px;
}

プランカーはこちら

4

1 に答える 1

1

追加のラッパーとセットを追加position: relativeしoverflowて、さまざまなラッパーに追加できます: HTML

  <div id="base">
      <div id="container">
        <div id="popup">Popup Text</div>
      </div>
  </div>

CSS

#base {
  height:50px;
  width:50px;
  position:relative;
}
#container{ 
  overflow: scroll;
  height:100%;
  width:100%;
}
#popup {
  position:absolute;
  top:20px;
  border:1px solid #000;
  height:100px;
  width:100px;
}

フィドル: http://jsfiddle.net/UGftq/

「秘密」は、そのoverflowプロパティです

...要素のすべてのコンテンツのクリッピングに影響を与えます。ただし、子要素 (およびそれぞれのコンテンツと子孫) を除き、含まれるブロックはビューポートまたは要素の祖先です。

絶対配置要素の包含ブロックは、非 static を持つ最も近い ascestorpositionです。したがって、要素overflowが配置されていない場合、絶対配置された子孫はクリップされません。

于 2013-07-23T17:34:43.117 に答える