位置のスクロールバーを取り除くこと：位置の絶対的な内部：オーバーフローの相対的な内部：

こんにちはみんな、ここで私の最初の質問はスタックのオーバーフローです。かなりシンプルなものを手に入れようとすると、かなり明白なものが欠けていると思います。まだ "標準" CSSに慣れてきて、機能していないものを扱うには長年を要しています！ Heh。位置のスクロールバーを取り除くこと：位置の絶対的な内部：オーバーフローの相対的な内部：

だから、私がやっているのサンプル：本質的には

<div style="overflow: auto; border: 1px solid"> 
    hello 
    <div style="position: relative; z-index: 99999; top: 0px; left: 0px;"> 
     <div style="z-index: 99999; overflow-y: hidden; position: absolute; overflow: hidden; height: 200px; left: 0; auto: 0"> 
      <ul> 
       <li >New</li> 
       <li >Old</li> 
      </ul> 
     </div> 
    </div> 
</div>

：最初のdivコンテナは、私は自動的にオーバーフローコンテンツが追加されるようたいこと、です。そのコンテナの中に、ここで簡略化したポップアップメニューがあります。ポップアップメニューが "hello"のすぐ下に表示されます。

しかしながら、私の問題は、絶対位置によって予想されるように、親からポップアップメニューが出てくるのではなく、実際にスクロールバーが親に現れることです。

私は、「位置：相対」を取っても機能するとは知っていますが、必要な場所（直前の要素の直下）には表示されません。

私はここで何が欠けていますか？

編集：ここサンプル：すべてのhttp://marcos.metx.net/OverflowTest.htm

出典

2009-07-19 Anonymous

あなたはcssの例で私たちがもっと理解できるようにライブのHTMLをお願いします。 –

最初 - インラインスタイリングなしなし大きいです。

"id"または "class"属性を使用して、スタイルシートを含めて個々のdivに適用することをお勧めします。

は、問題があなたのoverflowプロパティです w3schools

で標準に準拠したCSSをお読みください。

自動 - 「オーバーフローがクリップされている場合は、スクロールバーはコンテンツの残りの部分を見るために追加すべき」

あなたが探しているものを「オーバーフロー：目に見えます;」

出典

2010-01-28 15:56:28

ここで 'overflow：auto'が必要です。元の著者が望むのはスクロールバーを持つことだと思うが、 'div：絶対位置'は 'position：absolute'を持っているので流れから抜けてほしくない。実際には、コンテナに 'position：relative'がない場合に起こります。 – avernet

w3schoolsよりMDN CSSチュートリアルを強くお勧めします。 https://developer.mozilla.org/en-US/docs/CSS/Getting_Started –

relativeの代わりにposition: absoluteを使用すると、その中間のdivで問題が解決されます。これは、あなたが（最も内側の追加境界線の色をDIV）を与える：

alt text http://img.skitch.com/20100211-x8mnu5ds4exphbdbg956cuj6ea.png

そしてここでは、更新されたソースコードである。この詳細については

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    </head> 
    <body> 
     <div style="overflow: auto; border: 1px solid"> 
      hello 
      <div style="position: absolute; z-index: 99999"> 
       <div style="z-index: 99999; overflow-y: hidden; position: absolute; 
         overflow: hidden; height: 200px; left: 0; auto: 0; 
         border: 1px solid red"> 
        <ul> 
         <li >New</li> 
         <li >Old</li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

、Absolutely positioned box inside a box with overflow: auto or hiddenを参照してください。

出典

2010-02-11 18:45:19 avernet

位置のスクロールバーを取り除くこと：位置の絶対的な内部：オーバーフローの相対的な内部：

答えて

関連する問題