ホームページ  >  記事  >  ウェブフロントエンド  >  CSSで画像の位置を設定する方法

CSSで画像の位置を設定する方法

醉折花枝作酒筹
醉折花枝作酒筹オリジナル
2021-04-20 13:56:0910708ブラウズ

方法: まず、position 属性を使用して要素の位置決めタイプを指定します。構文は「position:static|relative|fixed|absolute」です。次に、top、bottom、left、right 属性を使用して定義します。画素のオフセット位置を正確に特定します。

CSSで画像の位置を設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

position 属性は、要素の配置タイプを指定します。この属性は、要素のレイアウトを確立するために使用される位置決めメカニズムを定義します。任意の要素を配置できますが、絶対要素または固定要素は、要素自体のタイプに関係なく、ブロック レベルのボックスを生成します。相対的に配置された要素は、通常のフローではデフォルトの位置からオフセットされます。

要素は実際には、top、bottom、left、right 属性を使用して配置されます。ただし、position プロパティが最初に設定されない限り、これらのプロパティは効果がありません。位置の値に応じて動作が異なります。

CSSで画像の位置を設定する方法

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			img {
				position: absolute;
				left: 100px;
				top: 100px
			}
		</style>
	</head>

	<body>
		<img  src="2.jpg" / alt="CSSで画像の位置を設定する方法" >
		
	</body>

</html>

推奨される学習: css ビデオ チュートリアル

以上がCSSで画像の位置を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。