- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 绝对定位1
- </title>
- <style type="text/CSS">
- input[type=button] { height: 32px; width: 100%; } body div {background-color:
- #CCC;} p{ margin-left: 260px; } img+p{ margin-top: 60px; }
- </style>
- </head>
- <body>
- <!-- /*绝对定位会先将该元素从文档中拉出来,也就是相当于将该元素从代码中删除第二个img标签一样,当该元素absolute化时,这个元素会根据第一个定义了定位方式的非static方式的父元素,进行top,left,right进行定位,可能会覆盖其他元素来进行定位。
- (如果不满足,则相对与body元素生成一个新的块。)*/ -->
- <!-- <img src="img/刺绣.jpg">
- <img src="img/刺绣1.jpg">
- <img src="img/刺绣2.jpg">
- <p><input type="button" id="button" value=
- "点击第2张图片应用position:absolute变天使"></p>
- <script type="text/javascript">
- var button = document.getElementById("button");
- image2 = document.getElementsByTagName("img")[1];
- if(button && image2){
- var value_init = button.value;
- button.onclick = function() {
- if(this.value == value_init){
- image2.style.position = "absolute";
- this.value = "撤销";
- }else {
- image2.style.position = " ";
- this.value = value_init;
- }
- };
- } -->
- <!-- // absolute的表现特性之一:去浮动 <img src="img/刺绣.jpg">
- <img src="img/刺绣1.jpg">
- <img src="img/刺绣2.jpg">
- <p><input type="button" id="float" value="点击第二张图片应用float:left"></p>
- <p><input type="button" id="button" value=
- "点击第2张图片应用position:absolute变天使"></p>
- <script type="text/javascript">
- var flbtn = document.getElementById("float"),
- button = document.getElementById("button"),
- image2 = document.getElementsByTagName("img")[1];
- if (flbtn && button && image2) {
- var value_init = button.value;
- button.onclick = function() {
- if (this.value == value_init) {
- image2.style.position = "absolute";
- this.value = "撤销";
- } else {
- image2.style.position = "";
- this.value = value_init;
- }
- };
- flbtn.onclick = function() {
- image2.style["cssFloat" in this.style? "cssFloat": "styleFloat"] = "left";
- };
- }
- </script> -->
- <!-- absolute表现特性二:位置跟随 -->
- <img src="img/刺绣.jpg">
- <div>
- <img src="img/刺绣1.jpg">
- </div>
- <img src="img/刺绣2.jpg">
- <p>
- <input type="button" id="block" value="点击第二张图片应用display:block">
- </p>
- <p>
- <input type="button" id="button" value="点击第2张图片应用position:absolute变天使">
- </p>
- <script type="text/javascript">
- var block = document.getElementById("block");
- button = document.getElementById("button");
- image2 = document.getElementsByTagName("img")[1];
- if (block && button && image2) {
- var value_button_init = button.value;
- button.onclick = function() {
- if (this.value == value_button_init) {
- image2.style.position = "absolute";
- this.value = "撤销";
- } else {
- image2.style.position = " ";
- this.value = value_button_init;
- }
- };
- var value_block_init = block.value;
- block.onclick = function() {
- if (this.value == value_block_init) {
- image2.style.display = "block";
- this.value = "撤销";
- } else {
- image2.style.display = " ";
- this.value = value_block_init;
- }
- };
- }
- </script>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-1962527.html