サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
あなたはhtml/cssにおける要素の重なり方を知っていますか? z-indexを指定しなければ先に書いたほうが下層で後に書けば上層に来る? というわけで、実は割りと複雑な要素の重なりについて書きます。そこまで意識しなくとも支障がでることは滅多にないと思いますが、知っておいて損はないはずです。 ちなみに、昨今CSS3なるものが流行していますが、この記事はW3CのCSS2.1勧告(と付録)を元に書いています。 基本的な内容であり、目新しいことは特になにもありません。 スタックコンテキストとスタックレベル 用語と概念から。 ある意味、ここが一番よくわかりませんが、ここがわからないと何もわかりません。 スタックコンテキスト(スタッキング・コンテキスト) 簡単に言えばauto以外のz-indexと位置(static以外のposition)を指定した要素によって生成される階層構造を形成する固まりです
<div class="card bgRed">ノーマル</div> <hr /> <p>マウスオーバーで・・・</p> <div class="card bgBlue flip">パキっとめくれる</div> <br /> <div class="card bgGreen flip flipAnimation">ゆっくりめくれる</div> <br /> <div class="card bgYellow flipMore flipAnimation">めっちゃめくれる</div> <br /> <div class="card bgPurple flipMore flipAnimation flapInTheWind">風になびきつつ、めっちゃめくれる</div> /* shape */ .card { position: relative; width: 300px; padding
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く