レイヤーの対して、「position:absolute」を指定すると、親要素の位置を
基準に配置場所が決まりますよね。

ある画像を画面のセンター揃えにした場合、自動的に画面のセンターに表示
されるようになります。これだと画面のサイズによって画像の座標が変わって
しまいます。

今は<BODY>タグが親要素となっているため、レイヤーの位置が画面のサイズに
よって違ってしまいます。(つまり画面の上から40px、横から100pxという指定)
画面のサイズによって座標が変わる親要素からレイヤーの位置を指定したいのですが、その方法がわかりません。
解決策を教えてください。

果たしてこの説明で意味が伝わったでしょうか??心配…。

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

A 回答 (2件)

おや?と思ったのですが



<center>
<table><tr><td>
<IMG SRC = "img//logo.gif" class = logo>

と組んだ時にネスケ6.2だとテーブルを親として判断せずにウインドウを
基準に座標をとるようです。IEだとOKなんですけどねぇ
    • good
    • 0

説明が分かりにくいのでできればサンプルを呈示していただいたほうが


わかりやすいかも・・
配置に関しては以下のキーワードが用意されています。

  通常の場所から相対的  relative
  親に対して絶対的に配置 absolute
  親要素に絶対的。不動  fixed

この点に関してはご存知かと思います。固定的に配置するのであれば
head中にスタイルシートの指定をいれるとした場合
IMG.logo{ z-index:auto; position:absolute; top-10px;left:30px;}
といれて<IMG SRC = "img//logo.gif" class = logo>とクラスを
指定してやればOKです。
親要素に対して相対的であるならposition:relativeでよいのではないで
しょうか。
    • good
    • 0

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

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

Qpositionのrelativeとabsoluteについて

本やネットで調べても

相対位置のposition:relative;や、
絶対位置のposition:absolute;の

意味や違いが全然分かりません。
どなたかわかりやすく教えてください。
回答よろしくお願いします。

Aベストアンサー

日本語にすると
relative=相対位置
absolute=絶対位置
です。

数学の座標平面はわかりますか?
イメージは
 1 2 3 4 5 6
1┌┬┬┬┬┬
2├┼┼┼┼┼
3├┼■┼┼┼
4├┼┼┼●┼
5├┼┼┼┼┼
たとえばこんな座標で、「●」がどこにあるかというのを表現するとき、座標どおりに(5,4)と表現するのがabsolute(絶対位置)式。
一方、現在■の位置にあって、そこから(+2,+1)のような表現で位置を表すのがrelative(相対位置)です。

ですので、absoluteはその名前が示すように「絶対的な」場所を示すのでいかなるときも表示位置が変わることはありません。
一方のrelativeは、上の場合だと「■」が移動するとそれに伴って「●」の位置も動きますね?(なぜなら(+2,+1)というのは■の位置から右2つ下へ1つということですので)
…つまり「相対的な」場所を示しているといえます。

実際、パソコンのディスプレーは左上から(0,0)(0,1)…と座標が振られています。
この座標どおりの値の位置に表示をするのがabsolute(絶対位置)、
ある場所を起点に「右へ2つ、下へ3つ」の位置に表示をするのがrelative(相対位置)です。
わかりましたでしょうか?

日本語にすると
relative=相対位置
absolute=絶対位置
です。

数学の座標平面はわかりますか?
イメージは
 1 2 3 4 5 6
1┌┬┬┬┬┬
2├┼┼┼┼┼
3├┼■┼┼┼
4├┼┼┼●┼
5├┼┼┼┼┼
たとえばこんな座標で、「●」がどこにあるかというのを表現するとき、座標どおりに(5,4)と表現するのがabsolute(絶対位置)式。
一方、現在■の位置にあって、そこから(+2,+1)のような表現で位置を表すのがrelative(相対位置)です。

ですので、absoluteはその名前が示すように「絶対的な」場所を示すのでいかなる...続きを読む

Qcssで文字サイズ指定、ptでもpxでも指定できますが、違いは?

CSS初心者です。初歩的ですが、教えてください。
文字サイズの指定の単位はいろいろあるみたいですが、
皆様はどの単位を使っていますか?
例えば、ptとpxどちらも結構細かくサイズを指定できますが、
どちらかを選ぶ理由がいまのところありません。
どちらを何故使うのか、違いはあるのか・・・?
よろしくお願いします。

Aベストアンサー

>pxもパソコンの解像度に比例して表示される大きさが変わりますよね?
それは勿論ですが、基準にしやすいかしにくいか、という違いが出ます。

きっちりしたレイアウトを制作する際は横幅をピクセルで指定する事になると思います。
例えば600ピクセルで制作するとしましょう。
そこに1文字を目一杯表示したいとします(そんな事はしない。というツッコミは無しで…)。
その場合はフォントのサイズを600pxにすればいいことは考えるまでもありません。

しかしポイントの場合は?
「1ピクセル=○センチ」という変換は出来ません。よってポイントでも同じ事が言えます。
例え600ピクセルの横幅ぴったりのポイント数値を見つけたとしても、他の画面では?という事になります。

ポイント、センチ単位は印刷物の制作等の場合は使います。イラストレーターでチラシを制作する際等です。
しかしホームページは印刷する事を重視して制作するものではありません。
その為ピクセル単位を推薦します。

読みにくい文章かと思いますがこんな感じでいかがでしょう?

Qclip:rect(*px,*px,*px,*px)について

お世話になります

clip:rectを試しているのですが疑問があるので教えていただきたいのですが

<style type="text/css"><!--
#clip {
position:absolute;
clip:rect(5px,40px,40px,5px);
background-color:blue;
}
--></style>

<div id="clip">
あいうえお<br>
かきくけこ<br>
さしすせそ<br>
</div>

Firefox、Operaでは表示されているのですがIE6ではclipされずに全表示されています

サイト検索してもIE6は対応しているように書かれているのですが・・・(例文は大抵imgでしたけど)
そしてclipを動的にするとIE6でもちゃんとなるのですが何故でしょう?

<script language="javascript"><!--
function move(ht,wr,hb,wl) {
obj = document.getElementById("game");
ht--; if(ht < 0) ht = 0;
hb++; if(hb > 300) hb = 300;
wr++; if(wr > 500) wr = 500;
wl--; if(wl < 0) wl = 0;
obj.style.clip = "rect("+ht+"px "+wr+"px "+hb+"px "+wl+"px)" ;
if(ht == 0 && wl == 0) return false;
setTimeout("move("+ht+","+wr+","+hb+","+wl+")",10);
}
//--></script>
<style type="text/css"><!--
#game {
width:500px;
height:300px;
background-color:lightcyan;
position:absolute;
}
--></style>
<body onload="move(150,250,150,250)">
<div id="game"></div>

お世話になります

clip:rectを試しているのですが疑問があるので教えていただきたいのですが

<style type="text/css"><!--
#clip {
position:absolute;
clip:rect(5px,40px,40px,5px);
background-color:blue;
}
--></style>

<div id="clip">
あいうえお<br>
かきくけこ<br>
さしすせそ<br>
</div>

Firefox、Operaでは表示されているのですがIE6ではclipされずに全表示されています

サイト検索してもIE6は対応しているように書かれているのですが・・・(例文は大抵imgでしたけど)
そし...続きを読む

Aベストアンサー

訂正です。スレ読んだだけで仕様をしっかり読んでませんでした。

Authors should separate offset values with commas.
CSS記述者はオフセット値をカンマで区切るべきである。
User agents must support separation with commas,
User Agentsはカンマ区切りをサポート【しなければならない】が

but may also support separation without commas, because a previous revision of this specification was ambiguous in this respect.
この仕様の前回の版ではこの点について曖昧な記述だったため,
カンマなし区切りをサポートしても良い。

#おそらくIEの開発は,この前版までの情報を頼りに製作されていたんじゃないかなあ

Qbefore疑似要素で画像を指定した場合の文字位置

いつもいつもお世話になっています。

before 疑似要素で画像を指定した時、画像が文字サイズより大きいとすると
次にくる文字の位置(縦)が画像の下のラインに合っています。

画像の中央から文字を開始したいのですが、なかなかうまいこといきません。
なにとぞ、ご教示ください。

現在は、以下のように指定しています。

---------------------------------------------------------
CSS
---------------------------------------------------------
.test{
border:1px solid #39C;
color:#006699;
}

.test:before{
float:left;
padding-top:0px;
padding-right:10px;
content: url("../img/icon.gif");
}

---------------------------------------------------------
HTML
---------------------------------------------------------
<p class="test">
あああああ
</p>

いつもいつもお世話になっています。

before 疑似要素で画像を指定した時、画像が文字サイズより大きいとすると
次にくる文字の位置(縦)が画像の下のラインに合っています。

画像の中央から文字を開始したいのですが、なかなかうまいこといきません。
なにとぞ、ご教示ください。

現在は、以下のように指定しています。

---------------------------------------------------------
CSS
---------------------------------------------------------
.test{
border:1px solid #39C;
color:#006699;
}

.tes...続きを読む

Aベストアンサー

 画像は置換インライン要素ですから、contentプロパティで内容を追加すると、当然ベースラインを合わせて表示されます。
 そこで、positionプロパティで位置を指定する必要があります。そのとき、absoluteを使用するなら、他の要素と切り離されて直近のstatic以外の親コンテナブロックの位置が基準になります。relativeを使用すると本来の位置からずらして表示させることが出来ますが、この場合本来表示されるべき位置・サイズにそれがあると他の要素が判断しますから注意してください。
 floatはいくらなんでも使わないでしょう。

Q文字サイズ変更でテーブル要素(幅の値を指定済み)の幅が変化しないようにするには?

宜しくお願いします。

[症状]
TABLE・TDタグにて、幅をしているすると、
文字サイズ:小 で見るときは、設定した値の
適正地が反映されるが、文字サイズ:中 以上に
設定すると、TABLEで設定最多幅は有効なままで
あるが、TDで設定した値は完全に無視される形で、
テーブルの中のバランスが乱れてしまう。

[ソース]

<table width="750" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="white" style="border-collapse:collapse ">
<tr>
<td style="width:250px; ">あ</td>
<td style="width:300px; ">い</td>
<td style="width:200px;">う</td>
</tr>
<tr>
<td>え</td>
<td>お</td>
<td>か</td>
</tr>
</table>

[コメント]
特に変哲のないソースだと思います。
あ~か の文字のところには、それぞれもう少し長い
文章が入る形となります。

[質問]
文字サイズをブラウザ上で変更しても、
TDの幅が変わらないようにしたい。
その際に、文字のサイズを固定はしたくないです。

[その他]
styleではなく、width指定しても
効果がありませんでした。

宜しくお願いします。

宜しくお願いします。

[症状]
TABLE・TDタグにて、幅をしているすると、
文字サイズ:小 で見るときは、設定した値の
適正地が反映されるが、文字サイズ:中 以上に
設定すると、TABLEで設定最多幅は有効なままで
あるが、TDで設定した値は完全に無視される形で、
テーブルの中のバランスが乱れてしまう。

[ソース]

<table width="750" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="white" style="border-collapse:collapse ">
<tr>
<td style="width:250px; "...続きを読む

Aベストアンサー

スペーサーを使います。
文字サイズのために,幅が大きくなることが原因ではなくて,空白部分のあるセルが横のセルによって縮まることが原因だからです。

イメージ的には「つっかえ棒」を入れるのです。
スペーサーは普通,透明なGIFですが,そうではなくて,各列のタイトル部分だけを画像にして,スペーサー兼見栄えの良い列タイトルとすることもあります(私はこちらの方法をよく使います)。

参考URLなどを参考にしてみてください。

参考URL:http://www5c.biglobe.ne.jp/~horoau/html/spacer_gif.html


人気Q&Aランキング

おすすめ情報