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;
}
}

このQ&Aに関連する最新のQ&A

A 回答 (2件)

趣味でWEBサイトを作成している者です。


あの・・・display:none;で反映されたって・・・消えただけですよね…
これは非表示にする物です。
positionとは何ら関係のないものです。
あとposition:absolute;よりもrelativeの方がいいですよ?
absoluteだとほかと全く独立して位置決めするので画面上部、画面左右からの指定ですが
relativeだと元々出る位置からの指定で、画面倍率の値をいじってもずれません
セットで居る為だと思います。
あと上の画像の値にz-index:1;とでも書いて下さい。
これは画面に対して奥(数字が小さい1)手前(数字が大きい10)というz軸を設定する為のものです。
これ入れるとずれないと思います。
同じ位置で重なるとどうしてもずれが出ると思いますので。
    • good
    • 0

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;}
とか・・
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QZenly GPS 位置情報 アプリについて。 私はiPhone、旦那はAndroid(Xperia

Zenly GPS 位置情報 アプリについて。
私はiPhone、旦那はAndroid(Xperia)でお互いにZenlyを使用し始めたのですが、旦那のZenlyは旦那がアプリを起動させないと位置情報が更新されません。
私はiPhoneで、位置情報は常にオンにしているので、私のはいつみても位置情報更新され続けているのですが、旦那のだけアプリを起動しなあとなりません。
何故でしょうか?
Androidの位置情報オンになってますし、Wi-Fiはオンにきてあります。
他に考えられることはありませんか?

Aベストアンサー

Android用とiphone用で別のプログラムなのではないかと思います。

Android用はJava、iPhone用はObjective-Cで書くのが基本で、
別のプログラム言語です。
両方で動作するプログラムが書けないわけではないのですが
位置情報を読むようなソフトは難しいんじゃないかな。

本当のところはZenly GPSの開発者に聞かないとわからないですが。

QCSSで菱形の画像サムネイルを表示し、クリックで元画像を表示させたい

タイトル通りです。
ギャラリーホームページを作っています。
菱形のサムネイルを並べ、クリックしたら元の画像が表示されるようにしたいと思っています。
jQuery?を使えるのが一番なのですが、うまく適用せず、よく分かりませんでした。
CSSでタイトルのような事をするためには、どのようにすればいいでしょうか?

Aベストアンサー

html
<ul>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
</ul>

css
li{
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
transform: rotate(45deg);
margin: 40px;
float: left;
}
li img{
position: absolute;
width: 250px;
height: 250px;
transform: rotate(-45deg) translate(0%, -120%);
left: 100%;
top: 100%;
}

親で正方形を45度傾けたマスクを作り
imgで傾いちゃった画像を元に戻し、
rotate(-45deg)
適当な位置に調整しています。
translate(0%, -120%);
left: 100%;
top: 100%;
クリックすれば、リンクに張られたURLが開きます。

html
<ul>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a><...続きを読む

Qスマホをなくしてしまいました。 GPSなどの位置情報をオフにしているため、Androidデバイスマネ

スマホをなくしてしまいました。
GPSなどの位置情報をオフにしているため、Androidデバイスマネージャーでも探せません。
遠隔で位置情報をオンにできる方法はありませんか?

Aベストアンサー

残念ながら、位置情報をOFFにした状態では手元から離れてしまうともうどうしようもないですね…。

QCSSのdivのposition:relative;で位置がずれない

IE6を使用しています。
次のような

「sample.css」
.sample {height:90px; background-color:#00ff00; font-weight:bold; position:relative; top 40px; }
.sample2 {color:#ff0000; position:absolute; top:10px; left:10px }
.sample3 {color:#ff0000; position:absolute; top:30px; left:30px }

「a.html」
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<div class="sample">
position:relative
<div class="sample2">
sample2
</div>
<div class="sample3">
sample3
</div>
</div>
</body>
</html>

を実行した場合に、ブラウザのトップから40pxだけ下にclass="sample"にある内容を
表示させたいのですが、どうも下にずれてないようなのです・・・
何が原因なのでしょうか?

IE6を使用しています。
次のような

「sample.css」
.sample {height:90px; background-color:#00ff00; font-weight:bold; position:relative; top 40px; }
.sample2 {color:#ff0000; position:absolute; top:10px; left:10px }
.sample3 {color:#ff0000; position:absolute; top:30px; left:30px }

「a.html」
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<div class="sample">
position:relative
<div class="sample2">
sample2
</div>
<div ...続きを読む

Aベストアンサー

position:relative;はもとの位置から指定した値だけ動かすためのものです。
http://www.stylish-style.com/csstec/base/position.html
.upsampleを50px動かしたとしても.downsampleは動かないので、両方のスペース分とってposition:relative; top:100px;とすれば解決できます。

できますが、もしもposition:relative;でやる必要がない場合は

.sample2 {
color:#ff0000;
position:absolute; top:10px; left:10px; }

.sample3 {
color:#ff0000;
position:absolute; top:30px; left:30px; }

.upsample {
height:50px;
background-color:#00ff00;
font-weight:bold;
position:relative;
margin-top:50px; }

.downsample {
height:50px;
background-color:#00ff00;
font-weight:bold;
position:relative;
margin-top:50px; }

というようにmarginを使うほうがわかりやすいかもしれないです。

position:relative;はもとの位置から指定した値だけ動かすためのものです。
http://www.stylish-style.com/csstec/base/position.html
.upsampleを50px動かしたとしても.downsampleは動かないので、両方のスペース分とってposition:relative; top:100px;とすれば解決できます。

できますが、もしもposition:relative;でやる必要がない場合は

.sample2 {
color:#ff0000;
position:absolute; top:10px; left:10px; }

.sample3 {
color:#ff0000;
position:absolute; top:30px; left:30px; }

.upsam...続きを読む

Qかれし(既婚者)のAndroidスマホのステータスバーをふとみたら 位置情報提供OFFとでておりまし

かれし(既婚者)のAndroidスマホのステータスバーをふとみたら
位置情報提供OFFとでておりました。
これって嫁が位置情報求めてきてるものを彼氏が
ONにしていないってことですか?

Aベストアンサー

かれしに聞いてみて下さい。バッテリーの消耗が嫌でOFFにしているのかもしれせん。

QChromeでcssを表示させると、css内部の日本語が文字化けする。

Chromeでcssを表示させると、css内部の日本語が文字化けする。

https://sns.sc/css/style.css なのですが・・・

Dreamweaver ccでcssを書いて、@charset "utf-8; とcssの先頭に自動で記入されて、秀丸で開きなおしたらUnicode(UTF-8)と表示されて,

でも、それをドリでアップして、Chrome(Version 57.0.2987.98 (64-bit))でそのcssファイルを見ると、日本語が文字化けしてます。

ですが、Firefoxだと文字化けしません。

これを改善するにはどうすればいいでしょうか?

css は https://sns.sc/css/style.css にアップしてます。

以上、お手数をおかけして大変恐縮ではございますが、ご対応のほど、よろしくお願い申し上げます。

Aベストアンサー

よくよく考えたらUTF8にしたいならBOM付きにすればいいのでは?

Q位置情報検索アプリ探してます。iOS, Android 間で使えるものを教えてください。

.例えば友人同士での、位置情報検索アプリを探してます。iOS, Android 間で実用的なレベルで使えるものを教えてください。無いことないよね。

Aベストアンサー

Zenlyはいかが?

家族間で飲み会の迎えなど活用してます。
先日は家族でのスキー旅行で活躍してくれました。

私ら夫婦がAndroid、息子はiPhoneですが使えますよ。

QCSSで画像を同じ位置に重なり合わせるには?

お世話になります。
2枚のTOP画像(一枚は差し替え可能なJPG、もう一枚はその画像の上に位置するフレーム枠のような役割を果たすGIF画像)をぴったり重ね合わせて配置したいと考えています。
調べたところz-indexという方法があるらしく、position:relativeしてtop,left指定でいろいろ試してみたのですが、上に重なる画像の分だけ、下部コンテンツに空きが出ます。(添付画像のような現象です)
これはCMS化して画像を差し替える時のためにページなのですが、こういう現象をなくして普通のWebサイトページのように配置することはできないのでしょうか?
素人ゆえおかしな質問しているかもしれませんが、どうかご教授お願いします。
現時点のHTML/CSSはこんな感じです。

HTML---

<div id="contens">
<div id="top_img_a">
<p class="img_top"><img src="images/dammy_img02.jpg" alt="新規投稿ダミー画像" /></p>
<p class="flame"><img src="images/new_entries_img_flame.gif" alt="新規投稿フレーム枠" /></p>
</div>

CSS---(本意ではありませんが、やむなくtop,left調整で位置を作っている段階です。)

#top_img_a {
width:900px;
margin:0;
padding:0;
position:relative;
top:0px;
}
.img_top {
position:relative;
z-index:1;
top:0;
left:25px;
}
.flame {
position:relative;
z-index:2;
top:-216px;
left:25px;
}

お世話になります。
2枚のTOP画像(一枚は差し替え可能なJPG、もう一枚はその画像の上に位置するフレーム枠のような役割を果たすGIF画像)をぴったり重ね合わせて配置したいと考えています。
調べたところz-indexという方法があるらしく、position:relativeしてtop,left指定でいろいろ試してみたのですが、上に重なる画像の分だけ、下部コンテンツに空きが出ます。(添付画像のような現象です)
これはCMS化して画像を差し替える時のためにページなのですが、こういう現象をなくして普通のWebサイトページのように配...続きを読む

Aベストアンサー

>調べているうちに気が付いたのですが、sectionプロパティもnavプロパティも
>HTML5のみの対応で、
 きちんと正確に!!。
「sectionプロパティもnavプロパティ」じゃありません。
・section要素、nav要素はHTML5から採用される要素です。
 文書は色々な要素で組み立てていて、それをタグを用いてどの要素かを示します。
 p要素は、それでマークされていれば、囲まれた部分がp要素であることを示します。
・HTML4では、文書構造を示す要素が不足していたため、class名やIDをつけていました。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
・・・top_img_a,img_top,flameというclass名じゃ、おかしいでしょ。そもそも、まったく必要ないのですよ。

 私は原則として、class名にHTML5で登場する要素名を使用しています。それは先でHTML5でページを作成するときに、スムーズに移項できるからですし、本来、HTML4でも望まれる名前だからです。
 ですから、別にHTML4.01だろうが、XHTML1.0だろうが、class名として使うなら問題ありません。
 ただし、HTML4.01であってもXHTML1.0であっても、必ずstrictで作らなきゃダメです。
 もしくはXHTML1.1。なぜなら、HTML4.01の勧告(1999/12)以来、
『著者
・・・【中略】・・・
 HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』
となっていたはずです。予告どおり、XHTML1.1HTML5では、transotinalな要素、属性は削除されています。

★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )
最後に、検証済みのソースを示しておきます。スタイルシートなしで表示してもよい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css" media="screen">
<!--
html,body{margin:0;}
div.header,div.section,div.footer,div.footer div.nav{
_width:720px;margin:0 auto;
_border:solid 1px silver;
}
div.header{
_height:200px;
_margin-bottom:40px;
_background-color:silver;
_border-color:silver;
}
div.section{
_background-color:fuchsia;
_border-color:fuchsia;
}
div.footer div.nav{
_position:absolute;top:200px;height:40px;
_font-family:"MS Pゴシック", "ヒラギノ角ゴ Pro W3", sans-serif;
_line-height:40px;
_text-align:center;
_background-color:black;
}
div.footer ul,div.footer ul li{
_display:block;list-style:none;
_margin:0;padding:0;
}
div.footer ul li{
_width:118px;float:left;
_position:relative;
}
div.footer ul li a{
_display:block;
_width:100%;height:100%;
_text-decoration:none;
_color:#FFF;
}
div.footer ul li ul{
_font-size:75%;
_position:absolute;top:40px;left:0;
_display:none;
}
div.footer ul li ul li{
_height:60px;width:140px;
_background-image:url(../images/dawnmenu_button.gif);
}
div.footer ul li:hover{
_background-color:rgb(255,160,0);
}
div.footer ul li ul li:hover{
_background-color:transparent;
}
div.footer ul li ul li a{
_padding-top:20px;
}
div.footer ul li:hover ul{
_display:block;
}
div.footer{
_background-color:yellow;
_border-color:yellow;
}
div.section p,div.section h2,div.section dl{
_width:680px;margin:0 auto;
}
div.section p.sample img{
_display:block;
_margin:0 auto;padding:5px;
_background-image:url(images/new_entries_img_flame.gif)
}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>サンプル</h1>
_</div>
_<div class="section">
__<h1>サンプル2</h1>
__<div class="section">
___<p class="sample"><img src="images/dammy_img02.jpg" width="480" height="360" alt="サンプル画像"></p>
___<h2>用意する画像</h2>
___<dl>
____<dt>images/dammy_img02.jpg</dt>
____<dd>480px巾、360px高さの画像を用意する。</dd>
____<dt>images/new_entries_img_flame.gif</dt>
____<dd>内寸480×360pxが透明な枠用画像</dd>
____<dt>../images/dawnmenu_button.gif</dt>
____<dd>巾140,高60pxの吹き出し画像</dd>
___</dl>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<div class="nav">
___<ul>
____<li><a href="/">TOP</a></li>
____<li><a href="./profile">会社情報</a>
_____<ul>
______<li><a href="./profile/index.html">会社概要</a></li>
______<li><a href="./profile/office.html">営業所</a></li>
_____</ul>
____</li>
____<li><a href="./B">Bボタン</a></li>
____<li><a href="./C">Cボタン</a></li>
____<li><a href="./D">Dボタン</a></li>
____<li><a href="./E">Eボタン</a></li>
___</ul>
__</div>
_</div>
</body>
</html>

>調べているうちに気が付いたのですが、sectionプロパティもnavプロパティも
>HTML5のみの対応で、
 きちんと正確に!!。
「sectionプロパティもnavプロパティ」じゃありません。
・section要素、nav要素はHTML5から採用される要素です。
 文書は色々な要素で組み立てていて、それをタグを用いてどの要素かを示します。
 p要素は、それでマークされていれば、囲まれた部分がp要素であることを示します。
・HTML4では、文書構造を示す要素が不足していたため、class名やIDをつけていました。
『DIV要素とSPAN要...続きを読む

QAndroidを紛失しました アンチウイルスで位置情報を取得したいのですが、GPSがオフにされてし

Androidを紛失しました

アンチウイルスで位置情報を取得したいのですが、GPSがオフにされてしまい、わかりません。

遠隔でGPSをオンにできる方法はありませんか?

Aベストアンサー

皮肉や嫌みを言うわけではなく、素直にお読みください。

今回の端末探索の際のGoogleアカウントに限らず、おそらく様々なアプリやサービスを既にお使いで、アカウント、ID、パスワードの類をたくさんお持ちではありませんか?
それはいわば各部屋のカギ。
カギを差し込みっぱなしの不用心なお部屋(ログインしっぱなし)の使用が当たり前となっているなら、「誰でも空き巣にどうぞ!状態」で今回のように紛失し手にした他人が自由にサービスを利用できるわけで、絶対にお辞めになった方が良いでしょうし、また紛失がわかった段階でデータの保持や消去、位置探索などすぐに対策がとれるようにID、パスワードは記憶にだけだよらず、一覧でメモ書きし別に持ち歩く、ご自宅のパソコンにも一覧データを保管しておくなどしておきませんと・・・・。

さて、なくされた端末とは別にパソコンをお持ちかどうかがお答えいただいていないので推測で回答を続けますが、パソコンから以下のサイトに行きますと、Googleアカウント・パスワードの登録設定時に同様に設定した「予備アドレス」を入力し送信しますと、その予備アドレス宛てにアカウント(ID)のメール送信を受けることが出来ます。
この予備アドレスを、どこの度のアドレスを登録された物か知りませんが。

https://www.google.com/accounts/recovery/forgotusername?hl=ja

皮肉や嫌みを言うわけではなく、素直にお読みください。

今回の端末探索の際のGoogleアカウントに限らず、おそらく様々なアプリやサービスを既にお使いで、アカウント、ID、パスワードの類をたくさんお持ちではありませんか?
それはいわば各部屋のカギ。
カギを差し込みっぱなしの不用心なお部屋(ログインしっぱなし)の使用が当たり前となっているなら、「誰でも空き巣にどうぞ!状態」で今回のように紛失し手にした他人が自由にサービスを利用できるわけで、絶対にお辞めになった方が良いでしょうし、また紛...続きを読む

QCSS マウスオーバーでテキストの上に画像を表示させるには?

CSS で hover を使い、マウスオーバーするとリンクのテキストの上に画像を持ってくる(テキストが見えない状態にする)方法というのはありますか?
background-image を使うとテキストが見えてしまいます・・

マウスオーバーで 画像1→画像2 と表示させる方法はこちらの他の回答で見つけたのですが、テキスト→画像 と表示させる方法は見つかりませんでした。
よろしくお願いいたします。

Aベストアンサー

それ、私が答えたやつですね。

a {
display:block;
font-size:12px;
width:100px;
height:20px;
background:url(aaa.gif);
}
a:hover {
background:url(bbb.gif);
text-indent:-9999px;
}

hoverのとき、テキストが画面外に飛んで、bbb.gifに変わります。リンクは残っているから大丈夫です。
ちなみに、heightとwidthはテキストまたは画像サイズに合わせてください。
ただし、テキスト量と画像サイズに差があるときには使えないかも・・・。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報