絶対配置ってなに? | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery


Q 絶対配置ってなに?

答え 自由な場所に配置できる機能(CSS)です。


① 絶対配置には2つあります。

・・・position:fixed;・・・スクロールしてもついてくる。スクロールしても同じ位置にいる。
・・・position:absolute;・・・スクロールしてもついてこない。

② Aの場合は、画面の左上が起点(原点)です。
  Bの場合は、指定した部分の左上が起点(原点)です。(アメブロの場合はフレーム
  ヘッダー画像の左上が起点(原点)となります。

  起点(原点)はXY座標で left=0 top=0 です。
  left=0 はX座標で右に行けば数字があがります。
  top=0 はY座標で下に行けば数字があがります。

  また、right=0 bottom=0 を使えば起点(原点)が右下になります。

③ フレームは自動的に位置を中央寄せするようにしています(margin:auto;)ので
  画面(ウインドウ)の大きさを変えると自動的にコンテンツ(ブログ)部分が中央に
  位置します。

  の場合は、画面の左上の起点(原点)は変化しないので、
  コンテンツ(ブログ)部分が中央にに移動することによって絶対配置したものが
  位置を移動したように見えてしまいます。
  絶対配置ものが移動したのではなく、コンテンツ(ブログ)部分が移動したのが
  原因です。

  の場合は、起点(原点)はフレームなのでフレームが中央に移動しても、
  フレームの起点(原点)と相対的な位置に配置されます。(フレームと同じく位置が動く)
  よって、ずれたようには見えません。

④ もし、AとBを両方使いたい場合は、下記記事の様に行います。

http://ameblo.jp/new-blue-777/entry-11182440628.html


⑤ 絶対配置しているものの中で、絶対配置を行った場合は、そのものの上の階層(親階層)内
  での絶対配置となるので注意が必要です。

  たとえば、サイドバーA内にフリースペース(アイフレなど)を配置していて
  (サイドバーの配置)、サイドバーAを絶対配置して、フリースペース(アイフレなど)を
  絶対配置すれば、フリースペース(アイフレなど)はサイドバー内での絶対配置となり、
  サイドバーから外には出られません。
  但し、そのような状態でも、フリースペース(アイフレなど)をスクリプト(プログラム)で
  外に移動させれば回避可能ですが、難しい場合もあります。


 ・・・ コンテンツに起点を設定する場合もありますが、その場合は、コンテンツより上には
     配置できないので注意すること。

● フレームは、.skinFrame2を意味します。


★ 新スキンの主な場所の名前


リアナのカスタマイズ日記(CSS編集用デザイン)-新スキンの主な場所の名前


★ ランのカスタマイズ日記の下記記事でも説明
http://ameblo.jp/new-bulue9/entry-10703327173.html