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を探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
form input テキストを上下中央...
-
HTMLで文字が重なって表示されます
-
CSS検証サービス
-
定義リストに下線をつけたいと...
-
W3Cのソースコードの検証サービ...
-
Media Queries 4 で 非推奨とな...
-
余分な縦スクロールバーが出て...
-
<div>と<div>の間の10px程の...
-
footer を横幅いっぱいに広げる...
-
インラインフレーム内の表示位...
-
CSS:animation開始位置の設定
-
CSSがなぜかfont-sizeだけ効か...
-
clearfix の後marginが効かない
-
CSS、width100%でもできる余白
-
firefoxにおけるmargin-topの表...
-
css初心者 フレックスボックス...
-
css&html テキストの前に三角...
-
CSS3で角丸写真にシャドーを付...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
form input テキストを上下中央...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
HTMLで文字が重なって表示されます
-
CSSで背景画像を一番下にもって...
-
W3Cのソースコードの検証サービ...
-
CSS、width100%でもできる余白
-
CSSでボックスのheightが0になる
-
CSSがなぜかfont-sizeだけ効か...
-
Media Queries 4 で 非推奨とな...
-
スクロールボックスを中央に配...
-
【CSS】ヘッダーの高さが不明の...
-
CSS(0の単位)について
-
【HTML&CSS】フッター下部の余...
-
<div>と<div>の間の10px程の...
-
CSSで指定した背景画像にリンク...
-
余分な縦スクロールバーが出て...
おすすめ情報