コーディングをしてると、CSSで指定しているはずの要素がどこかへ居なくなってしまうことがあります。
そんな時の解決方法をご紹介します。
要素の重なりを疑う
背景全体にカラーを敷いてたり、画像を敷いてたり要素を重ねてたりすると、起こる現象。
こんな時は、隠れている要素の重なり（z-index）を一番上にしてみよう。
【DEMO】
z-index3
z-index2
いなくなった要素に、「z-index」は指定されている？
それぞれテキストと同じクラス名が付いた四角の重なりが確認できると思う。
HTML要素は基本的に下の行の記述ほど、重なりは上に来ます。
でも、その基本はCSSの記述で変更することが可能。
例えば、上の行に「position」を指定したdivがあると、その他の要素より重なりは上に来ます。
でも、すべての要素に「position」が指定してある場合、やっぱりHTMLの基本の下の行ほど、重なりは上に来ます。
すべての要素に「position」がある場合は、「z-index」の指定で重なりを自由に変更できます。
「.z-index1」には、「z-index: 1;」が、「.z-index2」には「z-index: 2;」がついており「z-index」は数字が大きいほど上に表示される効果があります。
なので、真ん中の「.z-index3」はこの中で数字が一番大きいので、上に来ています。
【DEMO】のCSSは、下に記してあるのでご確認ください。
【CSS】
.z-index1, .z-index3, .z-index2 {
position: absolute;
width: 40%;
height: 40%;
display: block;
padding: 0 0 0 8px;
text-align: left;
font-size: 16px;
font-weight: bold;
}
.z-index1 {
z-index: 1;
top: 20%;
left: 20%;
background: rgba(235, 163, 42, .9);
}
.z-index3 {
z-index: 3;
top: 30%;
left: 30%;
background: rgba(42, 235, 125, 0.9);
}
.z-index2 {
z-index: 2;
top: 40%;
left: 40%;
background: rgba(185, 42, 235, 0.9);
}
要素の高さを疑う
ブロック要素以外の、「span」や「a」などに高さを指定しないと、見えなくなってしまう。
この「span」や「a」などは、インライン要素と言ってHTMLを記述しただけでは高さが無い。
インライン要素 高さを出す場合は、「heigth」で指定するか、「display:block」を指定して、ブロック要素にすると表示されるようになる。
要素の透明度を疑う
「z-index」を指定して、ブロック要素なのにどこにもいない場合、透明度「opacity」の存在を疑います。
もしかしったら、透明度の値が「０」になっているかもしれない。
javascriptで要素を動かす場合、よくこのようなことが起こるので、動かした後に値を「１」に戻しておくのを忘れずに。
要素の表示を疑う
CSSで「display:none」を指定している場合や、動的に「none」にしてそのままにしている場合は、「display:block」に戻すことで解決します。
これも、javascriptを使って要素を動かしているとよくあるミスです。
嗚呼、どれも見当違いだ。
上記のすべてを確認したが、ダメだった場合は、その要素の親や先祖要素までさかのぼってCSSを確認してください。
もしかしたら、先祖要素に「display:none」や「z-index:-1」などの記述が含まれているかもしれません。
その場合、先祖要素へ意図して記述してあるはずなので、親・子の別れを考えましょう。
コメント