绝对定位实现div与div覆盖

最新推荐文章于 2023-05-17 17:52:05 发布

aaa45655555

最新推荐文章于 2023-05-17 17:52:05 发布

阅读量390

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jinhuan/p/6812329.html

版权

 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>

转载于:https://www.cnblogs.com/jinhuan/p/6812329.html

aaa45655555

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
绝对定位实现div与div覆盖

1 新建html文件可以运行(jsp文件下不可运行) 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <styl...
复制链接

扫一扫