資訊專欄INFORMATION COLUMN
摘要：因為圖像元素設(shè)置了屬性值為所以它會顯示在文字之后。參考資料菜鳥教程
一，效果圖。
二，代碼。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Positioningtitle>
<style>
p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
}
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
h2.pos_top {
position: relative;
top: -50px;
}
h2.absolute {
position: absolute;
left: 100px;
top: 150px;
}
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
style>
head>
<body>
<p class="pos_fixed">Some more textp>
<p><b>Note:b> IE7 and IE8 supports the fixed value only if a !DOCTYPE is specified.p>
<p>Some textp>
<p>Some textp>
<p>Some textp>
<p>Some textp>
<p>Some textp>
<p>Some textp>
<p>Some textp>
<p>Some textp>
<p>Some textp>
<p>Some textp>
<p>Some text
Some text
Some text
Some text
Some text
Some text
This is a heading with no position
This heading is moved left according to its normal position
This heading is moved right according to its normal position
Relative positioning moves an element RELATIVE to its original position.
The style "left:-20px" subtracts 20 pixels from the elements original left position.
The style "left:20px" adds 20 pixels to the elements original left position.
This is a heading with no position
This heading is moved upwards according to its normal position
Note: Even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow.
This is a heading with an absolute position
With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.
This is a heading
因為圖像元素設(shè)置了 z-index 屬性值為 -1, 所以它會顯示在文字之后。