悬浮窗位置请教

118440

(function () {
    'use strict';
    var div = document.createElement("div");
    var body = document.querySelector("body");
    if (window.top == window.self) {
        body.appendChild(div);
    }
    div.innerHTML = `
        <link rel="stylesheet"  />
        <div class="box_1">
            <span>复制标题</span>
            <i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i>
        </div>
        <style>
        .box_1{
            position: fixed;
            display: flex;
            top: 100px;
            left: -103px;
            width: 150px;
            height: 30px;
            z-index: 99999;
            font-size: 15px;
            cursor: pointer;
            align-items: center;
            transition: .6s;
            background: linear-gradient(225deg, transparent .5em,rgba(0, 0, 0, 0.5));
        }
        .box_1 i{
            position: absolute;
            margin-left: 10px;
            right: 0;
        }
        .box_1 span{
            margin-left: 5px;
        }
        .box_1:hover{
            left: 0;
        }
        </style>`
    var title = document.title;
    var url = document.URL;
    var span = document.querySelector(".box_1 span");
    div.onclick = function () {



    }
})();


这是悬浮窗按钮 为什么我启动多个悬浮窗的话  他们会自动叠加到一起呢  即使更改top left这些他也会自动叠加到一起  请问这个该怎么解决呢

118440

这个源码也是我复制论坛大神的

Hangover

没明白你啥意思

给你来个简单demo：

1. // ==UserScript==
   
2. // @name         New Userscript
   
3. // @namespace    https://bbs.tampermonkey.net.cn/
   
4. // @version      0.1.0
   
5. // @description  try to take over the world!
   
6. // @author       You
   
7. // @match        https://scriptcat.org/search
   
8. // @grant        unsafeWindow
   
9. // @grant        GM_addStyle
   
10. // ==/UserScript==
    
11. 
    
12. let mybtn1 = document.createElement('button');
    
13. let mybtn2 = document.createElement('button');
    
14. let mybtn3 = document.createElement('button');
    
15. document.body.appendChild(mybtn1);
    
16. document.body.appendChild(mybtn2);
    
17. document.body.appendChild(mybtn3);
    
18. mybtn1.id = 'my-btn1';
    
19. mybtn2.id = 'my-btn2';
    
20. mybtn3.id = 'my-btn3';
    
21. mybtn1.innerHTML = '按钮1';
    
22. mybtn2.innerHTML = '按钮2';
    
23. mybtn3.innerHTML = '按钮3';
    
24. GM_addStyle(`
    
25.     #my-btn1{
    
26.         position: fixed;
    
27.         top: 100px;
    
28.         left: 100px;
    
29.     }
    
30. 
    
31.     #my-btn2{
    
32.         position: fixed;
    
33.         top: 100px;
    
34.         left: 200px;
    
35.     }
    
36. 
    
37.     #my-btn3{
    
38.         position: fixed;
    
39.         top: 100px;
    
40.         left: 300px;
    
41.     }
    
42. `)

复制代码

Hangover

position: absolute;会脱离文档流，子元素会重叠

你还是先研究下定位吧：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

Hangover

刚刚更新了，哥哥可以继续研究研究~

『一键复制网页标题和链接-油猴中文网』https://bbs.tampermonkey.net.cn/thread-1484-1-2.html