2012-01-28 8 views
2

私はoverflow-yでdivを持っています。と私はdivの外に位置したいボタンの右側に擬似要素があるが、それは動作しません。ここはフィドルです - http://jsfiddle.net/PAdSd/1/です。オーバーフローでdivの外側に座っていない疑似要素

しかし、もし私がdivをオーバーフローさせなければ、それはdivの罰金から出てくるでしょう。ここはフィドルです - http://jsfiddle.net/PAdSd/2/

すべてのヘルプは、それはあなたがすることを告げているものであるので、それが隠されています

答えて

3

position: relative.navから削除します。結果はthis jsfiddleです。

同じような問題が私の頭を壁に押しつけていました。試行錯誤と純粋なチャンスが解決策を生み出しました。ブラウザ間の互換性についてはわかりませんが、chromeとfirefoxで動作します(あなたのcss3プロパティに-mozという接頭辞が付いている限り)。

コンテンツが表示されるようにするには、:;(疑似要素に100%::高さを使用して、ために言うの相対的なあなただけの位置を削除できない場合に特に便利)

+0

それはクールですが、絶対に配置されているナビゲーション内の要素が必要です。 – theliberalsurfer

+0

divで '.nav'を' position:relative'で囲むことができます。[http://jsfiddle.net/magicalex/yatSy/]を参照してください。それは少しスープのdivのですが、それは私が思い付くことができる最高です。 – magicalex

+0

ああ、それはかなりドギーです。最後のもの。 – theliberalsurfer

0

素晴らしいことでしょう。

http://jsfiddle.net/PAdSd/3/

あなたはそれを隠したいが、まだオーバーフローが隠したくないなら、あなたは高いそれを再配置する必要があります。 .nav:afterはコンテンツを最後に配置しますが、navタグの内側に配置します。

トップCSS値を調整することで、より高い位置に配置できます。

.nav:after{ 
    content: ""; 
    border-radius: 5px; 
    background: #000; 
    width: 10px; 
    height: 10px; 
    position: absolute; 
    left: 500px; 
    margin-left: 1px; 
    top: 10px; 
    box-shadow: -5px 5px 0px #8f0222; 
    z-index: 20; 
} 

または、body:を代わりに使用すると、ナビゲーションバーの内側に実際に欲しいと思わないためです。

+0

私はNAVの下にそれを必要と私はオーバーフロー隠し – theliberalsurfer

+1

@AndrewMilsonを持っているNAVを必要とする - そしてあなたはナビゲーションバー内に配置することはできません。肩をすくめる。あなたは代わりにそれを体に置くことができますか?あなたは別のdivでそれをラップすることができますが、それはどこかに行く必要があります - http://jsfiddle.net/PAdSd/4/ – mrtsherman

+0

本当に良い提案です。 – theliberalsurfer

0

は、ここでは、この問題を解決するための別の方法です底に詰め物を加える、例えば10px; 次に、他の要素のパディング効果を削除するにはmargin-bottomを使用します:-10px;だから、

.nav{ 
    background: transparent; 
    height: auto; 
    overflow-y: hidden; 
    position: relative; 
    /*new stuff*/ 
    padding-bottom:10px; 
    margin-bottom:-10px; 
} 
関連する問題