绝对定位实现div移动 

 1 //html可以运行
 2 <!DOCTYPE html>
 3 <html>
 4 
 5     <head>
 6         <title></title>
 7         <meta charset="utf-8" />
 8         <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
 9         <style type="text/css">
10             .one {
11                 border: 1px solid #000;
12                 width: 300px;
13                 height: 370px;
14                 background-color: #B0C4DE;
15             }
16             
17             .two {
18                 top: 30px;
19                 background: aqua;
20                 width: 300px;
21                 height: 100px
22             }
23             
24             .three {
25                 background: cornsilk;
26                 width: 300px;
27                 height: 100px
28             }
29             
30             .four {
31                 left: 80px;
32                 top: 80px;
33                 background: cornflowerblue;
34                 width: 300px;
35                 height: 100px;
36             }
37         </style>
38 
39     </head>
40 
41     <body>
42         <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
43         <script type="text/javascript">
44             $(function() {
45                 $(".btn").click(function() {
46                     $(".four").css({
47                         "position": "absolute",
48                         "left": 9,
49                         "top": 230
50                     })
51                 })
52             })
53         </script>
54         <div class="one">
55             第一个
56             <div class="two">
57                 第二个</div>
58             <div class="three">第三个</div>
59         </div>
60         <input type="button" value="按钮" class="btn" />
61         <div class="four">第四个</div>
62     </body>
63     <html>

 

posted @ 2017-05-05 10:51  尽欢  阅读(3229)  评论(0)    收藏  举报