HTMLでタグの位置を設定する方法

青灯夜游
リリース: 2021-12-13 15:43:45
オリジナル
11008 人が閲覧しました

設定方法: 1.相対配置の場合はaタグの親タグに「position:relative;」スタイルを追加; 2.絶対配置の場合はaタグに「position:absolute;」スタイルを追加; 3. 使用 top、bottom、left、right 属性は、ラベルの位置を制御します。

HTMLでタグの位置を設定する方法

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

HTML では、position 属性を使用して a タグの位置を設定できます:

  • 「position:relative;」スタイルを親タグに追加します。相対配置の a タグ;

  • 絶対配置の a タグに「position:Absolute;」スタイルを追加します。

  • ラベルの位置を制御するための、top、bottom、left、および right 属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				width: 300px;
				height: 200px;
				background-color: yellow;
				position: relative;
			}
			a{
				position: absolute;
				top: 50px;
				left: 50px;
			}
		</style>
	</head>
	<body>
		<div>
			<a>我是一个a标签</a>
		</div>
	</body>
</html>
ログイン後にコピー

HTMLでタグの位置を設定する方法

説明:

position 属性は、要素の位置 (静的、相対、絶対、または固定) を指定します。 ) 測位方法のタイプ。

  • relative: 通常の位置を基準にして、相対的に配置された要素を生成します。したがって、「left:20」は要素の LEFT 位置に 20 ピクセルを追加します。

  • absolute: 静的な配置以外に、最初の親要素を基準にして配置される絶対配置要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。

推奨チュートリアル: 「html ビデオ チュートリアル

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート