Home > Article > Web Front-end > How to set the position of css
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.
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:
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>Rendering:
<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>Rendering:
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!