What is the positioning attribute in css?-CSS Tutorial-php.cn

What is the positioning attribute in css?

WBOY

Release： 2021-12-14 10:30:50

Original

7933 people have browsed it

In CSS, the positioning attribute is the "position" attribute; when the value of the attribute is "absolute", the element is absolutely positioned, when the value of the attribute is "fixed", the element is fixedly positioned, when the value of the attribute is " "relative" means the element is positioned relatively. When the value of the attribute is "relative", the element is not positioned by default.

What is the positioning attribute in css?

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

What is the positioning attribute in css?

In css, the positioning attribute of an element is position.

The role of the position attribute is to specify the positioning type of the element. This attribute defines the positioning mechanism used to establish the layout of the element. Any element can be positioned, but absolute or fixed elements generate a block-level box, regardless of the type of the element itself. A relatively positioned element is offset from its default position in normal flow.

The attribute values are as follows:

What is the positioning attribute in css?

##The relative positioning example is as follows:

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
</body>
</html>

Copy after login

Output result:

What is the positioning attribute in css?

An example of fixed positioning is as follows:

<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>
</body>
</html>

Copy after login

Fixed positioning will cause the element to be fixed relative to the browser window.

The absolute positioning example is as follows:

<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>
</html>

Copy after login

Output result:

What is the positioning attribute in css?

(Learning video sharing:

css video tutorial)

The above is the detailed content of What is the positioning attribute in css?. For more information, please follow other related articles on the PHP Chinese website!