Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームHTMLリファレンス(アルファベット検索)>positionプロパティ

CSSプロパティ辞典
タグ一覧(ABC順) 目的別タグ一覧 スタイルシート一覧(ABC順) 目的別スタイルシート一覧

position プロパティ …要素の配置方法を指定する

使用プロパティ

CSSプロパティ

position: 値;

対象となる
要素

すべて

継承

しない

次項(値と働き)を参照してください。

対応ブラウザ IE6 WinFireFox WinSafariFireFox MacIE5 macOpera

解説

position プロパティを使えば、ボックスの配置方法を指定することができます。このプロパティは配置方法のみを指定するもので、実際に座標を指定する、toprightbottomleft プロパティを指定する必要があります。

値と働き

働き 働き
static 通常通りの配置方法です。この値を指定すると、top、bottom、left、right プロパティが適用されません。これが初期値です。 relative 元の位置(static)を基準として、相対的な位置に表示します。元の位置から top、bottom、left、right プロパティで指定された分だけずらして表示します。
absolute positionプロパティの static 以外の値が指定されている場合には、親要素をの左上を基準として絶対的な位置を指定し。static 以外の値が親要素に定められてない場合はウィンドウの左上が基準となります。 fixed absolute と同じ表示位置となるが、fixed を指定するとスクロールしてもその位置から動かないように見えます。
Windows 版 Internet Explorer では、対応していません。

使用例

記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>

<!--スタイルシート-->
<style type="text/css">

div {
width: 500px;
height: 300px;
background-color: coral;
position: absolute;
}

.sample1 {
position: absolute;
top: 50px;
left: 50px;
background-color: gray;
}

.sample2 {
position: absolute;
top: 150px;
left: 250px;
background-color: gold;
}

</style>
</head>

<!--ページの本文-->
<body>

<div>

<span class="sample1">親要素の左上を基準として、上から50px、左から50pxの位置に指定しています。</span>

<span class="sample2">親要素の左上を基準として、上から150px、左から250pxの位置に指定しています。</span>

</div>

</body>
</html>
↓
[ブラウザでの表示例]
HOME PAGE ZERO ガイド
要素の左上を基準として、上から50px、左から50pxの位置に指定しています。 要素の左上を基準として、上から150px、左から250pxの位置に指定しています。

関連情報ページ

ページトップへ

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

<TOP>

logo
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system