绝对定位实现div与div覆盖 

 1 新建html文件可以运行(jsp文件下不可运行)
 2 <!DOCTYPE html>
 3 <html>
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             *{
 9                 margin: auto;
10             }
11             .d1{
12                 width: 500px;
13                 height: 500px;
14                 background-color: blue;
15             }
16             .d2,.d3,.d4{
17                 display: inline;
18             }
19             .d2{
20                 background-color: #ccc;
21             }
22             .d3{
23                 background-color: #FF0;
24             }
25             .d4{
26                 background-color: red;
27             }
28         </style>
29     </head>
30     <body>
31         <div class="d1">
32             <div class="d2">div1</div><br />
33             <div class="d3">div2</div>
34         </div>
35         <div class="d4">div4</div><br />
36         <input class="btn" type="button" value="ok" />
37     </body>
38     <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
39     <script type="text/javascript">
40         $(function(){
41             var d2L=document.querySelector(".d2").offsetLeft;
42             var d2T=document.querySelector(".d2").offsetTop;
43             $(".btn").click(function(){
44                 $(".d4").css({
45                     "position":"absolute",
46                     "left":d2L,
47                     "top":d2T
48                 })
49             });
50         })
51     </script>
52 </html>

 

posted @ 2017-05-05 12:03  尽欢  阅读(1685)  评论(0)    收藏  举报