论坛 › 问答互助 › 悬浮窗位置请教

118440 发表于 2022-3-12 15:12:48

悬浮窗位置请教

(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 发表于 2022-3-12 15:13:07

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

Hangover 发表于 2022-3-12 16:58:18

本帖最后由 Hangover 于 2022-3-12 17:02 编辑

没明白你啥意思

给你来个简单demo：
// ==UserScript==
// @name         New Userscript
// @namespace    https://bbs.tampermonkey.net.cn/
// @version      0.1.0
// @descriptiontry to take over the world!
// @author       You
// @match      https://scriptcat.org/search
// @grant      unsafeWindow
// @grant      GM_addStyle
// ==/UserScript==

let mybtn1 = document.createElement('button');
let mybtn2 = document.createElement('button');
let mybtn3 = document.createElement('button');
document.body.appendChild(mybtn1);
document.body.appendChild(mybtn2);
document.body.appendChild(mybtn3);
mybtn1.id = 'my-btn1';
mybtn2.id = 'my-btn2';
mybtn3.id = 'my-btn3';
mybtn1.innerHTML = '按钮1';
mybtn2.innerHTML = '按钮2';
mybtn3.innerHTML = '按钮3';
GM_addStyle(`
    #my-btn1{
      position: fixed;
      top: 100px;
      left: 100px;
    }

    #my-btn2{
      position: fixed;
      top: 100px;
      left: 200px;
    }

    #my-btn3{
      position: fixed;
      top: 100px;
      left: 300px;
    }
`)

Hangover 发表于 2022-3-12 17:06:30

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

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

Hangover 发表于 2022-3-12 19:51:17

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

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

查看完整版本: 悬浮窗位置请教