css - タブのように見えるようにdivを配置する

Question

div内にdivがあります。タブのようにシェルdivから拡張する必要があります。負の値で絶対測位を使用するだけで、親divから押し出されると思いました。それはうまくいかないようです。CSSの回避策はありますか？

例 http://jsfiddle.net/W3CyT/

Answer 1

あなたは正しくやっていますが、 と の値を再考する必要がありbottomますright。

右側の黒いボックスから赤いボックスをはみ出させたい場合は、代わりに削除right:0して適用することを検討してください。left:100%このアプローチにより、ブラック ボックスとレッド ボックスの幅に関係なく、レッド ボックスが常に右側の外側に表示されます。それらは幅サイズに依存しません。いずれかのボックスのサイズを動的に、または将来的に変更したい場合があるため、これは理想的です (ハード セット値にロックインされません)。

これが私が話していることのフィドルです。

Answer 2

http://jsfiddle.net/iambriansreed/W3CyT/4/

CSS

#sideWall {
    height:100px;
    width:100px;
    position:absolute;
    top: 10;
    left: 10;
    background: black;
    margin-top: 60px; /* give room for tab */
}

.showSideWall {
    height: 60px;
    width: 30px;
    position: absolute;
    top: -60px; /* move tab above container */
    right: 0;
    background: red;
}

Answer 3

Z-Index を使用して、1 つを別のものの上に配置できます。Twitter のブートストラップ コードを使用してこれを行うには、より良い方法があります。

http://twitter.github.com/bootstrap/

あらゆる種類のクールな機能のテンプレートを提供します