![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
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で質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
footer を横幅いっぱいに広げる...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
スクロールボックスを中央に配...
-
余分な縦スクロールバーが出て...
-
li 黒丸含んで移動する方法
-
【HTML&CSS】フッター下部の余...
-
テーブル内の画像をマウスオー...
-
IE9でa:hoverが効かない
-
Firefoxでheight:100%がきかない?
-
CSSのposition値の上書き(打消...
-
横のTableタグのヘッダを...
-
WEBサイト作成:初心者です...
-
画像だけを端に寄せる方法
-
ラジオボタンの大きさを変更し...
-
画像を中心に配置したい
-
HTML CSS の display: flex
-
CSSのdivのposition:relative;...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
css初心者 フレックスボックス...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
W3Cのソースコードの検証サービ...
-
スクロールボックスを中央に配...
-
CSSでボックスのheightが0になる
-
表示倍率を変えるとレイアウト...
-
【CSS】ヘッダーの高さが不明の...
-
Media Queries 4 で 非推奨とな...
-
div領域をウインドウサイズに合...
-
CSS(0の単位)について
-
divで囲まれたpaddingの指定を...
-
中点「・」の改行について
-
CSSで指定した背景画像にリンク...
おすすめ情報