今回のCSS

要素からはみ出た場合ってどうすれば？

とある要素内の要素が親要素よりも大きくなってしまう場合があります。
身近な例でいえば、スライドショーとか実はそうなのです。

.testClass
{
  overflow:visible; // はみ出して表示、初期値
  overflow:hidden; // はみ出した部分は非表示
  overflow:scroll; // はみ出した部分はスクロールで見れるように
}

ちょっとこの例では、パッと見、分からないかもしれないですが
親要素よりも子要素のwidthを大きく設定しています。 そして、親要素に対してCSSをかけている形になります。

ブロック要素なのにインライン要素

一番最初にhtmlのタグには、【ブロック要素】【インライン要素】【インラインブロック要素】があるとお話しましたが
その前提をなかったことにしてしまうCSSが存在しています。

通常、aタグはインライン要素の為、幅高さの指定ができません。
下記例ではwidth height を設定していますが、全て無視されます。

しかし、今回のCSSを適用させると、以下のようにリンク範囲が広がります。

.testClass
{
  display:XXXX;
}

display:XXX;のような指定を行います。
指定する値は少し数が多いので以下にまとめます。
使用頻度が高そうなものをまとめています。

スタイルの指定方法	効果
inline	インライン要素になります。 これが初期値です。 divにdisplay:inlineを指定 divなのに横並び divなのに横並び
block	ブロック要素になります。 インラインブロックである画像をブロック要素にしてみると、横並びにはできなくなります block適用
none	非表示状態になります。 ｵﾝﾄﾞｩﾙﾙﾗｷﾞｯﾀﾝﾃﾞｨｽｶｰ! 33-4 なんでや！阪神関係ないやろ！ そう(焼肉屋でご飯頼んだら)なれば、そう(おなかいっぱいに)なるやろ おれの怒りが有頂天になった 黄金の鉄の塊 本能的に長寿タイプ たまに良くある どちかというと大反対だな 汚いなさすが忍者きたない 仏の顔を三度までという名セリフを知らないのかよ ﾏｼﾞで親のﾀﾞｲﾔの結婚指輪のﾈｯｸﾚｽを指にはめてぶん殴るぞ
inline-block	inline-block要素になります。 あああああ いいいい
table-cell	td要素のような表示となります。 わーいわーいうれしいなぁーヾ('A`)ﾉ tdって言われてもって感じですが、 td要素にはvertical-alignが効きますので divなのにvertical-alignが効いちゃうって事です

表示順をかえる！

サイト構築をしていると、とあるときに要素が被ってしまう時があります。
その時に、この要素が常に上に来るようにしたい事があります。
そんな時の指定方法です。
また、指定がない場合は、htmlの記述順、つまり後の方が上にのる形となります。

指定なし

表示順を変えた時

.testClass
{
  z-index:XXXX; // 数値もしくはautoで指定

  // 数値を指定した場合は、0を基準として大きい程上に重なります。
  // autoを指定した場合は、親要素と同じ階層になります。
}

z-indexはpxとかそんな単位はありませんので数値のみの指定となります。
数値が大きいほど、上に乗ります。
デフォルトは0、最大数は2147483647、21億4748万3647でございます。
そんな使うか？みたいな感じに思いますが
どうあがいても一番上にしたい時とか、9999とか当てちゃったりします。

普通に実装しているとこのz-indexは使わないに等しいです。
cssのpositionを使うと結構使ったりします。
positionについては、次回予定ですよ。

もう少しだけ…
先ほど最大値って話をしましたが、最低値もあります。
-2147483647が最低値、マイナスの指定もできます。
ちなみに32ビットの範囲って事です。32ビットについて説明するwiki先生

【ちょっとだけ重要】

A要素：z-index:-1;
B要素：z-index:1;
C要素：z-index:0;
の時の重ね順はどうなる？

B要素：z-index:1;
C要素：z-index:0;
A要素：z-index:-1;
と思うのが性なのですが、実はこれ間違いです。

B要素：z-index:1;
A要素：z-index:-1;
C要素：z-index:0;
が正解。0が常に一番した。

0「俺以外でやってくれ。一番したにいるから」
その他「おっしゃ。0以外で数値の低いやつから順番に重なっていけ」

って感じ。何故かって、それはもう【そういうもんなんだ】と割り切ってください。

ややこしい話が続いていますが、まだ最後にもうイッコだけ…

親要素のz-indexを継承する

A要素：z-index:-5;
Aの子要素1：z-index:100;
Aの子要素2：z-index:-100;
B要素：z-index:10;
C要素：z-index:1;

で重なった時！！！！
Aの子要素1：z-index:100;
B要素：z-index:10;
A要素：z-index:-5;
C要素：z-index:1;
Aの子要素2：z-index:-100;

こうやろ！！！！！

んん！！！！ちがいます！！！！！(ｱﾌﾞｩ・・・)

AとBとCは同じ階層同士の要素です。
で、親要素にz-indexが指定されている場合は、子要素のz-indexとは比較せず、親同士のz-indexで判断されます。
なので、

B要素：z-index:10;
A要素：z-index:-5;
Aの子要素1：z-index:100;
Aの子要素2：z-index:-100;
C要素：z-index:1;
が正解！！！

ほっほ～うなるほどねぇ～で終われば良いんです。本当にいいんですが…

例外がありますよ！！！
これ書いてる時に知りました。

A要素：z-index:auto;
Aの子要素1：z-index:100;
Aの子要素2：z-index:-100;
B要素：z-index:10;
C要素：z-index:1;

変わった所は赤字部分、z-index:autoが指定されています。
さて、これはどうなるかと言いますと

Aの子要素1：z-index:100;
B要素：z-index:10;
C要素：z-index:1;
A要素：z-index:auto;
Aの子要素2：z-index:-100;

こうです。もう頭痛い。へぇーって思ってていただいてOKです。
これも、【そういうもんなんだ】と割り切ってください。すいません。こうなるからしょうがないじゃないか…


【z-indexのまとめ】
１：数値が大きいほど、上になる
２：32ビットの数値で指定できますよ
３：0が一番下。マイナスは0の上
４：同階層でのz-index判定をします。

これだけで大丈夫です…
IEやらなんやらありますが、時間的にもヤバいので割愛。

練習問題的な