How to set the position of a tag in html-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to set the position of a tag in html

青灯夜游

Dec 13, 2021 pm 03:43 PM

html

Setting method: 1. Add the "position: relative;" style to the parent tag of the a tag for relative positioning; 2. Add the "position: absolute;" style to the a tag for absolute positioning; 3. Use The top, bottom, left, and right attributes control the position of the a label.

How to set the position of a tag in html

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In HTML, you can use the position attribute to set the position of the a tag:

Add the "position: relative;" style to the parent tag of the a tag for relative positioning ;
Add the "position: absolute;" style to the a tag for absolute positioning;
Use the top, bottom, left, and right attributes to control a label position.

<!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>

Copy after login

How to set the position of a tag in html

Description:

The position attribute specifies the position of an element (static, relative, absolute or fixed) The type of positioning method.

relative: Generates relatively positioned elements, positioned relative to their normal position. Therefore, "left:20" adds 20 pixels to the element's LEFT position.
absolute: Generate absolutely positioned elements, positioned relative to the first parent element other than static positioning. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

Recommended tutorial: "html video tutorial"

The above is the detailed content of How to set the position of a tag in html. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn