How to set the position of css-Front-end Q&A-php.cn

How to set the position of css

藏色散人

Release： 2023-01-05 16:10:46

Original

6022 people have browsed it

css can use the position attribute to set the display position of the element. The code statement for setting the position is such as "position:relative;", where relative means generating a relatively positioned element and positioning it relative to its normal position.

How to set the position of css

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

css can use the position attribute to set the display position 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.

Description of the position attribute of css setting position:

Attribute value:

How to set the position of css

##[Recommended learning:

css video tutorial】

css setting position example:

1. Demonstrate how to position an element relative to its normal position.

<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>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>

Copy after login

Rendering:

How to set the position of css

2. Demonstrate how to use absolute values to position elements.

<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

Rendering:

How to set the position of css

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