绝对定位实现div与div覆盖

本文转载自查看原文 2017-05-05 12:03 1189 jQuery

 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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 绝对定位实现div移动 DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV CSS中div覆盖另一个div CSS+DIV：父DIV相对定位+子DIV绝对定位 div覆盖div DIV相互重叠如何解决 div覆盖div DIV相互重叠如何解决浮动div居中定位 DIV 用CSS实现定位DIV绝对位于网页底部 js 定位到指定div的位置