DIV+CSS，如何使DIV跟随窗口大小改变位置，跟随住某个点击显示的图标_html/css_WEB-ITnose
手头有以下代码，是给某个播放器添加一个新的图标功能，设置了一个隐藏的DIV并加上CSS，点击显示，点其他地方隐藏。
但是这个DIV，不随窗口大小变化跟随到图标旁边，一直固定到了1081px。一缩小窗口，点击后就看不见了，除非将窗口拉到1081px宽度才行，但是位置却不是在图标旁边，偏移了
我希望他能想“更多”图标的DIV一样，无论窗口大小怎么样，都能出现在“更多”图标的旁边。
而且我发现“更多”图标的DIV的"element.style"内联样式的"left"也是跟着窗口变化的，而我的貌似是定死的。
//调用函数把CSS样式添加到<head>段的 <style>元素中function addGlobalStyle(css) { var head, style; head = document.getElementsByTagName('head')[0]; if (!head) { return; } style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = css; head.appendChild(style);}//定义CSS样式addGlobalStyle( '.player-info .track-info .track-controls #J_woPlay {' + ' top: 0px; right: -33px; position: absolute; cursor: pointer;' + '}' + '.icon-winopenPlay {' + ' background-image: url("http://bbsdata.gztwkadokawa.com/album/201405/28/225839pgklmuagcg25gcrr.png"); background-repeat: no-repeat;' + '}' + '.icon-winopenPlay {' + ' background-position: 0px -277px; width: 18px; height: 18px;' + '}' + '.icon-winopenPlay:hover {' + ' background-position: -28px -277px;' + '}' + '.icon-OldPlay {' + ' background-image: url("http://bbsdata.gztwkadokawa.com/album/201405/28/225839pgklmuagcg25gcrr.png"); background-repeat: no-repeat;' + '}' + '.icon-OldPlay {' + ' background-position: 0px -527px;' + '}' + '.icon-NewPlay {' + ' background-image: url("http://bbsdata.gztwkadokawa.com/album/201405/28/225839pgklmuagcg25gcrr.png"); background-repeat: no-repeat;' + '}' + '.icon-NewPlay {' + ' background-position: 0px -545px;' + '}' + '.icon-ListeningPlay {' + ' background-image: url("http://bbsdata.gztwkadokawa.com/album/201405/28/225839pgklmuagcg25gcrr.png"); background-repeat: no-repeat;' + '}' + '.icon-ListeningPlay {' + ' background-position: 0px -581px;' + '}' + '.track-play-menu {' + ' padding: 10px; border-radius: 4px; left: 300px; width: 140px; height: 60px; bottom: 26px; position: fixed; z-index: 1999; background-color: rgb(51, 51, 51);' + '}' + '.track-play-menu ul li {' + ' height: 30px; line-height: 30px;' + '}' + '.track-play-menu ul li a {' + ' border-radius: 4px; color: rgb(170, 170, 170); line-height: 30px; padding-left: 38px; text-decoration: none; display: block; position: relative;' + '}' + '.track-play-menu ul li a:hover {' + ' background-color: rgb(68, 68, 68);' + '}' + '.track-play-menu ul li i {' + ' left: 8px; top: 6px; width: 18px; height: 18px; position: absolute;' + '}' + '.track-play-menu .arrow {' + ' left: -9px; width: 9px; height: 18px; bottom: 16px; position: absolute; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAASCAYAAACJgPRIAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACLSURBVChThc4BDoIwDAVQONK6HUhRuQ4xRrksqP+PDsjWwU+arO3L0uYkrfd+0LeZVkSeQD/ti6yghgheCVioADnike8csHQff/hYgJXAaC1TNWeARdTj8c0X+4oHAT7QVGFEDOAdAxMqWYLBDVVAXW8JIXRYzIeIyaGOyzjnrrhzOkRMgtrWIyKXPykjhfjqVAPDAAAAAElFTkSuQmCC");' + '}' + '.ks-ie7 .track-play-menu .arrow {' + ' background-image: url("http://gtms03.alicdn.com/tps/i3/T1ZNuzFrtaXXbeUgbb-9-18.png");' + '}');//将按钮元素添加到"更多"后面$("#J_trackMore").after("<a id=J_woPlay class=icon-winopenPlay title=弹窗播放></a>");//隐藏div和显示div$(".icon-winopenPlay").click(function(e) { $(".track-play-menu").toggle();});$("*").click(function(event) { if (event.target.className != "icon-winopenPlay") { $(".track-play-menu").hide(); }});//设置div内容var str = window.location.href; var divplay = document.createElement("div"); divplay.id = "J_trackPlayMenu"; divplay.className = "track-play-menu"; divplay.style.height = "60px"; divplay.style.left = "1081px"; divplay.style.display ="none"; divplay.innerHTML = '<ul><li><a id=J_OldPlay onclick=OldPlay(); href=javascript:void(0)>' + '<i class=icon-OldPlay></i>' + '旧版弹窗播放' + '</a></li><li>' + '<a id=J_NewPlay onclick=NewPlay(); href=javascript:void(0)>' + '<i class=icon-NewPlay></i>' + '新版弹窗播放' + '</a></li>' + '</ul>' + '<span class="arrow"></span>' + '</div>'; document.body.insertBefore(divplay, document.body.firstChild);//设置弹窗函数$(document).ready(function(){ $("#J_OldPlay").click(function(){ var song=[]; song = str.split(""); song.splice(21,0,"s","o","n","g","/"); songurl = song.join(""); window.open(songurl,'','scrollbars=0,toolbar=0,status=0,location=0,resizable=0,menubar=0,width=754,height=557'); window.open('','_self',''); window.close(); });});$(document).ready(function(){ $("#J_NewPlay").click(function(){ window.open(str,'','scrollbars=0,toolbar=0,status=0,location=0,resizable=1,menubar=0,width=930,height=500'); window.open('','_self',''); window.close(); });});
回复讨论(解决方案)
先相对定位position:relative;，再绝对定位position:absolute;
这样在任何分辨率下位置都不会变了
先相对定位position:relative;，再绝对定位position:absolute;
这样在任何分辨率下位置都不会变了
实际上我自己通过特殊方法功课了~你说的那种我不会，所以用了其他定位方法。我看看还有没有人回复，没有的话就给你分吧
js先获取音乐图标的top很left位置，然后把这个获取的值加上图标本身的宽高，再赋值到弹出窗口的left跟top上边，这样不就图标在哪里，弹出在哪里的吗。
js先获取音乐图标的top很left位置，然后把这个获取的值加上图标本身的宽高，再赋值到弹出窗口的left跟top上边，这样不就图标在哪里，弹出在哪里的吗。
我自己就是用这种方法攻克的
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk melumpuhkan pratonton lakaran kecil bar tugas dalam Win11 Matikan teknik lakaran kecil paparan ikon bar tugas dengan menggerakkan tetikus
Feb 29, 2024 pm 03:20 PM
Artikel ini akan memperkenalkan cara untuk mematikan fungsi lakaran kenit yang dipaparkan apabila tetikus menggerakkan ikon bar tugas dalam sistem Win11. Ciri ini dihidupkan secara lalai dan memaparkan lakaran kecil tetingkap semasa aplikasi apabila pengguna menuding tetikus pada ikon aplikasi pada bar tugas. Walau bagaimanapun, sesetengah pengguna mungkin mendapati ciri ini kurang berguna atau mengganggu pengalaman mereka dan ingin mematikannya. Lakaran kecil bar tugas boleh menjadi menyeronokkan, tetapi ia juga boleh mengganggu atau menjengkelkan. Memandangkan kekerapan anda menuding di atas kawasan ini, anda mungkin telah menutup tetingkap penting secara tidak sengaja beberapa kali. Kelemahan lain ialah ia menggunakan lebih banyak sumber sistem, jadi jika anda telah mencari cara untuk menjadi lebih cekap sumber, kami akan menunjukkan kepada anda cara untuk melumpuhkannya. tetapi
Muat turun ikon tetapan telefon ke desktop 'Ketahui dalam beberapa saat: Langkah untuk menukar ikon untuk apl pada telefon Android'
Feb 06, 2024 pm 04:27 PM
Untuk mencantikkan desktop mereka, ramai pengguna suka menukar tema desktop mereka dengan kerap untuk memastikan mereka sentiasa segar. Walau bagaimanapun, menukar tema tidak akan mengubah ikon APP pihak ketiga dan pengindahan diperibadikan tidak cukup teliti. Jika anda bosan dengan ikon apl yang sama, gantikannya. Secara teorinya, jika anda ingin menukar ikon untuk aplikasi mudah alih, anda biasanya memerlukan sistem ROOT dan beberapa alat untuk membongkar dan menggantikan ikon. Tetapi memandangkan sebahagian besar telefon bimbit tidak lagi menyokong sistem ROOT, kita perlu mencari kaedah lain untuk mencapainya. Contohnya, beberapa aplikasi tertentu mungkin menawarkan pilihan untuk menyesuaikan ikon atau memperibadikan ikon melalui pelancar pihak ketiga. Selain itu, beberapa jenama telefon bimbit juga telah melancarkan kedai tema dan ikon khas untuk pengguna memilih dan menukar ikon. Di kedai aplikasi utama,
Apakah yang dimaksudkan dengan ikon UC 5G dan 5G UW pada telefon pintar mudah alih T anda?
Feb 24, 2024 pm 06:10 PM
Pengguna T-Mobile telah mula menyedari bahawa ikon rangkaian pada skrin telefon mereka kadangkala membaca 5GUC, manakala pembawa lain membaca 5GUW. Ini bukan kesilapan menaip, tetapi mewakili jenis rangkaian 5G yang berbeza. Malah, pengendali sentiasa mengembangkan liputan rangkaian 5G mereka. Dalam topik ini, kita akan melihat maksud ikon 5GUC dan 5GUW yang dipaparkan pada telefon pintar T-Mobile. Kedua-dua logo mewakili teknologi 5G yang berbeza, masing-masing mempunyai ciri dan kelebihan tersendiri. Dengan memahami maksud tanda ini, pengguna boleh memahami dengan lebih baik jenis rangkaian 5G yang mereka sambungkan supaya mereka boleh memilih perkhidmatan rangkaian yang paling sesuai dengan keperluan mereka. Ikon 5GUCVS5GUW dalam T
Bagaimana untuk memasukkan ikon excel ke dalam slaid PPT
Mar 26, 2024 pm 05:40 PM
1. Buka PPT dan putar halaman ke halaman di mana anda perlu memasukkan ikon excel. Klik tab Sisipkan. 2. Klik [Objek]. 3. Kotak dialog berikut akan muncul. 4. Klik [Buat daripada fail] dan klik [Semak imbas]. 5. Pilih jadual excel yang hendak disisipkan. 6. Klik OK dan halaman berikut akan muncul. 7. Tandakan [Show as icon]. 8. Klik OK.
Bagaimana untuk membuat asal Padam dari Skrin Utama dalam iPhone
Apr 17, 2024 pm 07:37 PM
Memadamkan sesuatu yang penting daripada skrin utama anda dan cuba mendapatkannya semula? Anda boleh meletakkan ikon apl kembali pada skrin dalam pelbagai cara. Kami telah membincangkan semua kaedah yang boleh anda ikuti dan meletakkan semula ikon aplikasi pada skrin utama Cara Buat Asal Alih Keluar dari Skrin Utama dalam iPhone Seperti yang kami nyatakan sebelum ini, terdapat beberapa cara untuk memulihkan perubahan ini pada iPhone. Kaedah 1 – Gantikan Ikon Apl dalam Pustaka Apl Anda boleh meletakkan ikon apl pada skrin utama anda terus daripada Pustaka Apl. Langkah 1 – Leret ke sisi untuk mencari semua apl dalam pustaka apl. Langkah 2 – Cari ikon apl yang anda padamkan sebelum ini. Langkah 3 – Hanya seret ikon apl dari pustaka utama ke lokasi yang betul pada skrin utama. Ini adalah gambar rajah aplikasi
Lokasi Burung Origami di Taman Filem dan Televisyen Stardome Railway Crocker
Mar 27, 2024 pm 11:51 PM
Terdapat sejumlah 20 burung origami di Taman Filem dan Televisyen Croaker di Star Dome Railway Ramai pemain tidak tahu di mana burung origami berada di Taman Filem dan Televisyen Crocker. Editor telah meringkaskan lokasi setiap burung origami untuk membantu semua orang . Carinya, dan lihat ringkasan terkini lokasi burung origami di Taman Filem dan Televisyen Croaker untuk kandungan tertentu. Panduan ke Kereta Api Kubah Bintang Honkai: Burung Origami di Crook Movie Park Lokasi 1, Crook Movie Park Tingkat 1 2 dan Crook Movie Park Tingkat 2 Star Dome Railway
Fahami lokasi dan struktur penyimpanan pakej pemasangan pip
Jan 18, 2024 am 08:23 AM
Untuk mengetahui lebih lanjut tentang lokasi storan pakej yang dipasang oleh pip, anda memerlukan contoh kod khusus Pip ialah alat pengurusan pakej yang biasa digunakan dalam bahasa Python Ia digunakan untuk memasang, meningkatkan dan mengurus pakej Python dengan mudah. Apabila menggunakan pip untuk memasang pakej, ia akan memuat turun fail pakej yang sepadan secara automatik daripada PyPI (Python Package Index) dan memasangnya ke lokasi yang ditentukan. Jadi, di manakah pakej yang dipasang oleh pip disimpan? Ini adalah masalah yang akan dihadapi oleh ramai pembangun Python. Artikel ini akan menyelidiki lokasi pakej yang dipasang oleh pip dan menyediakan
Apakah yang perlu saya lakukan jika ikon kaedah input Win10 tiada Bagaimana untuk mendapatkan semula ikon kaedah input Win10 selepas ia hilang?
Feb 29, 2024 am 11:52 AM
Selepas ikon kaedah input Win10 hilang, ramai pengguna tidak tahu cara mendapatkannya semula. Artikel ini akan memperkenalkan kaedah mudah untuk membantu pengguna mendapatkan semula ikon kaedah input Win10, membolehkan anda menukar kaedah input dengan mudah dan meningkatkan kecekapan kerja. 1. Sebab kaedah input hilang 1. Masalah susun atur papan kekunci: Jika anda menukar susun atur papan kekunci secara tidak sengaja, seperti menukar daripada bahasa Cina ke bahasa Inggeris atau bahasa lain, kaedah input mungkin hilang buat sementara waktu. 2. Masalah tetapan kaedah input: Dalam tetapan sistem, kita boleh menyesuaikan mod paparan kaedah input. Tetapan yang tidak betul boleh menyebabkan kaedah input tidak dapat dipaparkan atau disembunyikan. 3. Ralat atau ranap kaedah input: Perisian kaedah input itu sendiri mungkin mempunyai ralat atau ranap, menyebabkan kaedah input gagal dipaparkan dengan betul. 2. Cara memanggil kaedah input Kaedah 1: 1. Tekan [Win+
