タグ

CSSに関するa-kuma3のブックマーク (2)

  • 君は真に理解しているか?z-indexとスタッキングコンテキストの関係 - ICS MEDIA

    CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められています。スタッキングコンテキスト(Stacking Context)はウェブページ上の仮想的な奥・手前方向の概念であり、「重ね合わせコンテキスト」、あるいは「スタック文脈」とも言います。 z-indexによる重なり位置の指定もこのスタッキングコンテキストのうちの1つです。今回はz-indexより広い概念のスタッキングコンテキストの深淵を覗いてみます。 z-index:5がz-index:53万に勝つ方法 重なりといえば、z-indexです。z-indexはWeb初心者キラーなプロパティで、その値が必ずしも重なりの順序になりません。たとえば次のようなz-indexが53万と5の要素があったとします。この場合、53万の要素が上にきます。 <div class="wrapper wrapper-freeza"> <div

    君は真に理解しているか?z-indexとスタッキングコンテキストの関係 - ICS MEDIA
    a-kuma3
    a-kuma3 2020/06/10
    "俺たちは雰囲気でz-indexをやっている" / お、おう……
  • HTMLの<TD>タグで背景画像のサイズの自動調整ができません。…

    HTMLの<TD>タグで背景画像のサイズの自動調整ができません。 やりたいことは、下のサイトの上部の矢印を表示させたいです。 http://www.jinjour.jp/wp-content/uploads/2011/10/biz_shikou014_001_01.png 現状のHTMLタグは以下のようになっています。問題は文字数にあわせて、矢印を幅を調整したいのですがやり方が分かりません。(最初は、<TD>タグの背景画像に設定しましたが、<TD>内で背景画像を自動調整する機能はないらしくできませんでした。 <table><tr><td>商品企画</td><td>原材料調達</td><td>加工・製造</td><td>出荷</td><td>販売</td></tr></table> なにか良い方法は無いでしょうか。 ※ちなみに、<table>にこだわっていません。ただし矢印毎に画像ファイルを

    a-kuma3
    a-kuma3 2011/12/03
    画像を使わずに三角の切れ込みを入れる
  • 1