
CSSのpositionで画像を上にかぶせて表示させています。
そこでIE,firefoxはOKなのですがchromeだけ15pxぐらい下にずれてしまいます。
下記の2つのハックを使った場合、display:noneだと反映されたのですが
positionにすると何も反映しなくなります。
ハックはpositionには効かない、などあるのでしょうか?
どなたか教えていただけますでしょうか。
よろしくお願いいたします。
-----------------------
body:nth-of-type(1) #selector {position : absolute;top:960px;left:0px;filter: alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;
}
-----------------------
@media screen and (-webkit-min-device-pixel-ratio:0){
#selector {
position : absolute;top:960px;left:0px;filter: alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;
}
}
No.1ベストアンサー
- 回答日時:
趣味でWEBサイトを作成している者です。
あの・・・display:none;で反映されたって・・・消えただけですよね…
これは非表示にする物です。
positionとは何ら関係のないものです。
あとposition:absolute;よりもrelativeの方がいいですよ?
absoluteだとほかと全く独立して位置決めするので画面上部、画面左右からの指定ですが
relativeだと元々出る位置からの指定で、画面倍率の値をいじってもずれません
セットで居る為だと思います。
あと上の画像の値にz-index:1;とでも書いて下さい。
これは画面に対して奥(数字が小さい1)手前(数字が大きい10)というz軸を設定する為のものです。
これ入れるとずれないと思います。
同じ位置で重なるとどうしてもずれが出ると思いますので。
No.2
- 回答日時:
HTMLの抜粋がないので何をしたいかいまひとつわからないのですが?
absoluteは、親コンテナブロックがstatic以外のとき、親ボックスに対しての絶対配置ですが、一部ブラウザはrelativeに似た挙動をするものがあります。
また画像入れているものをブロックと判断して上下にマージンをとるものもあります。きちんとCSSを理解して対策をすればハックの必要はないはずですが?
★きちんと標準モードで動作するようにDOCTYPEを記述する。
★画像を含むそのコンテナブロック内の位置をrelativeないabsoluteなどで指定する。
★その子供要素に関してmarginやpaddingはいったん0にしておく。
とか・・
div.section{padding:0;position:relative;}
div.section p.image{position:absolute;margin:0;padding:0;tip:0px;left:0;z-index:1;}
とか・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
【CSS】ヘッダーの高さが不明の...
-
レイヤーを画面の左右中央に重...
-
FC2ショッピングカート 写真の...
-
初心者html・CSS ウィンドウを...
-
定義リストで先頭にアイコン
-
htmlのボタンのサイズについて
-
css初心者 フレックスボックス...
-
div入れ子の背景画像
-
CSSで指定した背景画像にリンク...
-
CSSで背景色を下まで表示させたい
-
CSSで背景画像を一番下にもって...
-
CSSでDIVで挟んでいるのに背景...
-
文字の色を上下で変えるには?
-
IE・FirefoxでのCSS表示違いに...
-
インラインフレーム内の表示位...
-
firefoxのみテーブルのborderが...
-
スタイルシート a:activeで画像...
-
IEだとdivが横に並びません
-
widthやheightの数値に単位(px...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
【CSS】ヘッダーの高さが不明の...
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
画像イメージの上下左右、欲し...
-
余分な縦スクロールバーが出て...
-
ページを拡大縮小でborderが消...
-
CSSがなぜかfont-sizeだけ効か...
-
表示倍率を変えるとレイアウト...
-
スクロールボックスを中央に配...
-
cssで文字サイズ指定、ptでもpx...
-
W3Cのソースコードの検証サービ...
-
投稿フォームの整列
-
<div>と<div>の間の10px程の...
-
入力フォームとセレクトボック...
-
ネガティブマージン
-
divで囲まれたpaddingの指定を...
-
CSSで「overflow:scroll」をしてい
-
FC2ショッピングカート 写真の...
おすすめ情報