絕對定位實現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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM