实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
h2.pos_left
6
{
7
position:relative;
8
left:-20px;
9
}
10
11
h2.pos_right
12
{
13
position:relative;
14
left:20px;
15
}
16
</style>
17
</head>
18
19
<body>
20
<h2>This is a heading with no position</h2>
21
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
22
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
23
<p>Relative positioning moves an element RELATIVE to its original position.</p>
24
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
25
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
26
</body>
27
28
</html>
29