
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ランキング
-
CSSで画面サイズを縮小するとレ...
-
マウスオーバー時に画像と一緒...
-
FC2ショッピングカート 写真の...
-
CSSで指定した背景画像にリンク...
-
画像イメージの上下左右、欲し...
-
HTML、cssのatomつぅー...
-
CSSの角丸での質問です。 今、C...
-
form input テキストを上下中央...
-
W3Cのソースコードの検証サービ...
-
footer を横幅いっぱいに広げる...
-
border-style:solidで文字がずれる
-
余分な縦スクロールバーが出て...
-
cssで枠の中に複数の罫線を引く...
-
borderについて2つの質問
-
dl,dt,ddタグでdtに対して、row...
-
CSSで背景画像を一番下にもって...
-
HTMLについて
-
CSSで「!important;」よりも優...
-
li 黒丸含んで移動する方法
-
メディアクエリ スマホ対応のサ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
【CSS】ヘッダーの高さが不明の...
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
画像イメージの上下左右、欲し...
-
余分な縦スクロールバーが出て...
-
ページを拡大縮小でborderが消...
-
CSSがなぜかfont-sizeだけ効か...
-
表示倍率を変えるとレイアウト...
-
スクロールボックスを中央に配...
-
cssで文字サイズ指定、ptでもpx...
-
W3Cのソースコードの検証サービ...
-
投稿フォームの整列
-
<div>と<div>の間の10px程の...
-
入力フォームとセレクトボック...
-
FC2ショッピングカート 写真の...
-
divで囲まれたpaddingの指定を...
-
CSSで「overflow:scroll」をしてい
-
ネガティブマージン
おすすめ情報