CSS

CSS positionの使い方

Sponsored Link

Sponsored Link

要素の位置を決めるpositionプロパティ

positionプロパティは、「要素の位置を決める」ためのプロパティで相対位置か絶対位置かを指定する際に使用します。
値によって4つの働きをします。

そしてpositionプロパティと併用して
その基準位置からみて要素がどこにあるかを top、 bottom、 left、 rightのプロパティに値をとってその方向や距離を設定します。

具体的には画像などの要素の位置を動かしたり、逆に決まった位置に要素を固定したり。
要素の上に別の要素を重ね合わせたり。といった使い方ができます。

セレクタ{

position(プロパティ):relative(値)

}

これと組み合わせて top、 bottom、 left、 righを例えば以下のように使います。

{
  position: relative;
  top: 10px;
  left: 10px;
}

 

positionの値は4種類

positionプロパティを規定する値には4つあります。

static

初期値。CSSで何も指定されていなければpositionプロパティはこの状態になっています。
要素は通常の位置にあって動かすことができませんし
staticではz-index:0の状態になっていて。重なり順も変えられません。(z-indexとは要素の重なり順を決めるプロパティ)
top、bottom、left、rightの値は指定しても適用されません。

position:relative

初期値で決められた要素の位置(staticを指定した場合に表示される位置)を基準として
そこから要素を目的の位置に動かしたい(相対位置への配置)ときに使われます。

例えばpositionの指定 無しで記述したとします。

HTML

2つのpタグで囲まれたテキストを設定します。

<p class="static">インコは可愛い</p>
<p class="relative">慣れてくるともっとかわいいよ</p>

CSSは以下。

後でわかりやすいように字を少し大きくし
背景色をオレンジと水色にしてあります。

positionは指定してありませんのでstatic(初期状態)になっています。

.static{background: orange;
	width: 300px;
	height:40px;
	font-size: 2em

}
.relative{background: skyblue;
    width: 300px;
	height:85px;
	font-size: 2em

}

ブラウザ表示は以下。

この水色の部分だけにpositionプロパティをrelative(移動可能)のしてみます。

右に3em下に5em移動させてみます。
(1emは16pxでしたね)

position: relative;
top: 3em; left: 5em;

と記述します。

なおpositionプロパティは必ず装飾の前に置きます。

.relative{
	position: relative;
    top: 3em;
    left: 5em;

	background: skyblue;
    width: 300px;
	height:85px;
	font-size: 2em
	
}

すると以下のようにブラウザ表示されました。

position:absolute

親ボックス(要素は表示領域と内外余白枠でできていてそれをボックスともいうんでしたね)
にpositionプロパティが指定されていないとabsoluteの起点はページ全体になります。
しかし、親要素にpositionの指定を加えることで、親要素を起点にすることができます。

なのでabsoluteを指定する場合には親要素を作り、relativeかfixedを記述しておくのです。

実際にやってみます。

親要素を作るために先程のHTMLの記述を少し変えてみます。
親要素<div>を追加し。parentと名前をつけました。

またpタグの下のclass名をabsoluteに変更しました。

   <div class="parent">
     <p class="static">インコは可愛い</p>
     <p class="absolute">慣れてくるともっとかわいいよ</p>
   </div>

CSSの変更は以下。

親要素CSSには

.parent{

position:relative;をくわえました。

内側の余白20pxを入れ。また背景の色を緑色にし。
幅500px高さ200pxにしました。

.parent{
 position:relative; 
padding: 20px; 
background: green; width: 500px; 
height:200px; }

繰り返しになりますが。

absoluteを使って位置調整するときは、親要素にposition:relative

fixedを指定して置かないと基準位置がずれて思ったように表示されません。

次に水色の方を絶対位置に固定したいと思います。
今回

position: absolute;

top: 0; left: 0;

にしてみました。
.absolute{ position: absolute;
top: 0; left: 0;
background: skyblue; width: 300px;
height:85px;
font-size: 2em }
全体としてCSSは以下。

.parent{
position:relative;
padding: 20px;

	background: green;
	width: 500px;
	height:200px;

}
.static{background: orange;
	width: 300px;
	height:40px;
	font-size: 2em

}
.absolute{
	
 position: absolute;
  top: 0;
  left: 0;
	background: skyblue;
    width: 300px;
	height:85px;
	font-size: 2em
	
}

すると以下のようにブラウザ表示されます。
絶対位置を指定した水色の部分は他の要素ボックスがあってもそれとは関係なく。
絶対位置に居座っています。

paddingの数値を大きくして例えば60pxにしてみます。
すると以下のようにブラウザ表示されました。

positionの指定をしていない要素は余白部分の広がりに応じて移動しますが。
余白の数値が変わってもposition: absolute;で指定した要素の位置は変わりません。

しかし

bottom: 0;

left: 0;

と絶対位置を別の位置に指定すると水色の部分は以下のように移動します。

一旦位置を決めればそこから動かないという性質を利用して
画像に文字を貼り付けたりするのに使ったりします。

例えば。
先程の記述の上のpタグを画像に変更しました。

<div class="parent">
     <<img src="インコ3().jpg" alt="インコ">
     <p class="absolute">慣れてくるともっとかわいいよ</p>
   </div>

そのうえでCSSを変更します。

親要素のpaddingと上のPタグにかかるCSSの記述を無くし。
position: absolute;と組み合わせる値を
top: 0;

left: 0;

と、元に戻しました。

.parent{
position:relative;


	background: green;
	width: 500px;
	height:800px;
先程の
.absolute{
	
 position: absolute;
  top:  0;
  left: 0;
	background: skyblue;
    width: 300px;
	height:85px;
	font-size: 2em
	
}

すると以下のようにブラウザ表示されます。

こんなふうに画像の説明などを貼り付けるには便利です。

position: fixed

絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなりますから
画面の決まった位置に要素を固定させたいときに使います。

先程の記述の内

position: absolute
をposition: fixed

に変更してみます。

それと親要素の高さの値を大きくしてスクロールできるようにしました。

するとスクロールしても絶対位置に固定した要素は動かないことがわかります。

 

 

こんな感じで。
pojitionを使いこなせると表現の幅が広がりますね。

今記事はここまで。

 

 

 

Sponsored Link

Sponsored Link

関連記事

  1. CSSで要素を横並びにする方法(floatとdisplay)とd…
  2. CSS 幅と高さの指定方法 widthとheightプロパティ基…
  3. CSS WEBアイコンフォントの使い方 Font Awesome…
  4. HTML ul ol liタグで作る箇条書きリスト 使い方の基本…
  5. HTML CSS テーブル(表)の作り方とその装飾の仕方 基本
  6. ソースコードを記事中に表示させるために必要なことは?簡単にソース…
  7. テキストエディタATOM インストールから基本編集・操作を詳説(…
  8. aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. 【Basics of site construction】多すぎる選択肢 ホームページ作成方法  HTMLとCMSの長所と短所を知るべし
  2. Windows10でブルーライトカットの設定 コントロールパネルの使い方
  3. WordPress新エディタ「Gutenberg」の使い方
  4. 【Basics of site construction】ドメインの選び方と名前の選定 サブディレクトリとサブドメインの役割について
  5. HTMLで動画や画像を埋め込みする方法を詳説
  6. エックスサーバーでSSL化設定をするやり方を詳細に解説してみた
  7. 【Basics of site construction】カテゴリーを設定はSEO対策に最重要 読者にもわかりやすい整理整頓方法とは
  8. 簡単なワードプレスのバックアップ方法 エックサーバーでの詳細説明

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

HTML ul ol liタグで作る箇条書きリスト 使い方の基本

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

表(table)の作り方表を作るには。テーブルタグを使います。&lt;TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

ウエブマーケティング入門酒場 
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

人気の投稿とページ

MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
HTMLで動画や画像を埋め込みする方法を詳説
HTMLとCSS 初歩的な文字装飾 基本まとめ
AviUtlでGIF形式で動画を保存することができる出力プラグイン Direct GIF Export 2
Windows10でブルーライトカットの設定 コントロールパネルの使い方
AviUtil カメラ制御の基本の基本を詳しく解説
AviUtl タイムラインの空いているところを右クリックして出てくるメニュー詳説
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
AviUtlのすべてのエフェクトについての解説⑬アニメーション効果(3)
AviUtl タイムラインの使い方①基本

ソフト・アプリの使い方

PAGE TOP