代码实例：
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>example</title>
<style type="text/css">
img{
width: 40px;
height: 40px;
top: 5px;
left: 150px;
border: thin solid black;
}
</style>
</head>
<body>
<p>
there are lots of differnt kinds of fruit.there are over 500 varieties of bananas alone.by the time we add the countless types of apples,oranges,and other well-known fruit,we are faced with thousands of choices.
</p>
<p>
there are lots of differnt kinds of fruit.there are over 500 varieties of bananas alone.by the time we add the countless types of apples,oranges,and other well-known fruit.
</p>
<img id="caomei" src="img/4d0df8064383e78d74e07014e7ccd0ee.jpg" />
<p>
there are lots of differnt kinds of fruit.there are over 500 varieties of bananas alone.
</p>
<p>
there are lots of differnt kinds of fruit.
</p>
<button>static</button>
<button>relative</button>
<button>abosolute</button>
<button>fixed</button>
<script type="text/javascript">
var buttons=document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++){
buttons[i].οnclick=function(e){
document.getElementById("caomei").style.position=e.target.innerHTML;
}
}
</script>
</body>
</html>
按下static时图片的位置：
按下relative按钮时图片的位置
按下fixed按钮后图片的位置：
按下absolute按钮时，图片先前位置是什么，之后位置不变。
结论：由这个例子，可以看出，static的位置在第三，四两个段落中间，在程序所写的位置。
reletive的位置是按照static所处的位置，根据css而改变位置。
fixed则是根据浏览器左上角位置，根据css而改变位置。
至于absolute，由于没有参照物，会和之前的位置保持不变。
1018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
