DIV CSS, how to make DIV change position according to the window size, and follow the icon displayed by a certain click_html/css

DIV CSS, how to make DIV change position according to the window size, and follow the icon displayed by a certain click_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:03 PM

Locationiconsizeshowfollow

I have the following code at hand, which is to add a new icon function to a certain player, set up a hidden DIV and add CSS, click to display, and click elsewhere to hide.
But this DIV does not follow the icon next to the window size change, and is fixed to 1081px. Once the window is reduced, it will no longer be visible after clicking, unless the window is stretched to 1081px width, but the position is not next to the icon, it is offset
I hope he can think of the DIV of the "more" icon, regardless of Regardless of the window size, it will appear next to the "More" icon.
And I found that the "left" of the "element.style" inline style of the "More" icon's DIV also changes with the window, but mine seems to be fixed.

//调用函数把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();  });});

Reply to discussion (solution)

First relative position: relative;, then absolute positioning position:absolute;
This way the position will not change at any resolution

First relative position position: relative;, then absolute position position: absolute;
This way the position will not change at any resolution The position will not change at all

In fact, I did my homework through special methods~ I don’t know what you said, so I used other positioning methods. I'll see if anyone else replies, if not I'll give you points

js first obtains the top and left positions of the music icon, then adds this obtained value to the width and height of the icon itself, and then assigns it to Above the left and top of the pop-up window, isn't it where the icon is and where the pop-up is?

js first obtains the top and left positions of the music icon, then adds the obtained value to the width and height of the icon itself, and then assigns the value to the left and top of the pop-up window, so that the icon is not in the Where, where did it pop up?

I used this method to overcome it myself

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

详细介绍如何在Windows 11上打开环境变量设置Dec 30, 2023 pm 06:07 PM

环境变量功能是系统中的配置程序运行必备工具，但是在最新的win11系统中还有许多的用户不知道怎么设置打开，下面就给你们带来了win11环境变量打开位置详细介绍，快来一起学习操作一下吧。win11环境变量在哪：1、首先输入“win+R”，打开运行框。2、然后在里面输入命令：controlsystem。3、在打开的系统信息界面中，选择左侧菜单的“高级系统设置”。4、随后在打开的“系统属性”窗口选择下方的“环境变量”选项。5、最后在打开的环境变量中，即可根据需求进行相关的设置。

Win11的启动路径以及如何打开它Jan 03, 2024 pm 11:13 PM

每一个Windows系统都有一个启动路径，如果你在其中添加了文件或软件，就会在开机的时候打开它。不过不少朋友不知道win11启动路径在哪里，其实我们只需要进入C盘的对应文件夹就可以了。win11启动路径：1、双击打开“此电脑”2、直接将该路径“C:\ProgramData\Microsoft\Windows\StartMenu\Programs\Startup”粘贴进路径框。3、这里就是win11启动路径了，如果我们要开机打开文件就可以将文件放进来。4、如果你根据这个路径进不来，可能是被隐藏了。

如何在 Steam 中更改游戏下载位置May 10, 2023 pm 11:22 PM

Steam是PC游戏玩家中最受欢迎的应用程序之一，因为您可以在Steam商店中找到任何主要游戏。它通过其用户界面简化了用户喜爱的游戏的下载、安装和管理。每当Steam用户想要下载游戏时，Steam都会使用应用程序的默认安装目录来下载和安装游戏。此位置默认为C:\ProgramFiles(x86)\Steam。问题来了，因为大多数用户在C盘上没有足够的空间，特别是对于占用大量存储空间的游戏，例如50–100GB。为了克服这个问题，Steam允许用户使用应用程序更改游戏的下载和

windows10凭证管理器在哪里Jul 09, 2023 am 10:09 AM

凭证管理器是用户用于管理web凭证和Windows凭据的一个作用，可是很多用户还不清楚windows10凭证管理器在哪里。其实凭证管理器就在操作面板上，大家在打开控制面板以后记得将查看方法改成小图标，那样就能见到凭证管理器了，点击查看就能查看各类信息了，如果想要查看大量，就需要输入账户密码。windows10凭证管理器在哪里：1、在系统中打开控制面板，点击右上角的查看方法，将类型转换成小图标。2、以小图标的方式查看以后，点击“凭证管理器”。3、进来凭证管理器以后，能够看见有关作用的介绍，主要用于

了解pip安装包存储的位置和结构Jan 18, 2024 am 08:23 AM

深入了解pip安装的包存放位置，需要具体代码示例pip是Python语言常用的包管理工具，用于方便地安装、升级和管理Python包。在使用pip安装包时，它会自动从PyPI（Python包索引）下载对应的包文件，并将其安装到指定的位置。那么，pip安装的包究竟存放在哪里呢？这是很多Python开发者都会遇到的问题。本文将深入探讨pip安装的包存放位置，并提供

win11关机位置Jan 10, 2024 am 09:14 AM

如果我们要长时间离开电脑，那么最好将电脑关机保护它，那么win11关机在哪里呢，其实一般来说只要打开开始菜单，在其中就可以找到关机按钮了。win11关机在哪里：答：在开始菜单的电源按钮里。1、首先我们点击底部任务栏的“windows徽标”打开“开始菜单”2、打开后，可以在右下角找到“电源”按钮，如图所示。3、点击电源按钮后，就能看到“关机”了，点击它就能关机。4、如果因为死机等特殊情况无法关机，那么可以直接用电脑上的“电源键”长按强制关机。

使用Apple的签入功能：iOS 17中的消息应用指南Sep 14, 2023 pm 09:13 PM

iOS17中的Apple在“信息”中添加了一项新功能，可让您在安全回家时让亲人知道。它被称为签入，这是你如何使用它。无论你是在天黑后步行回家，还是在清晨跑步，你都可以在Apple的“信息”应用中与家人或朋友一起开始签到，让他们知道你何时安全回家。在您到达后，CheckIn会自动检测您何时在家，并通知您的朋友。当他们收到警报并且签入已结束时，您也会收到通知。如果发生意外情况并且您在途中被延误，CheckTab甚至会识别出您没有取得进展并与您一起办理登机手续，询问您是否要增加预计到达时间。如果您没有

win10驱动安装路径详解Jan 04, 2024 pm 07:56 PM

在使用Windows10操作系统时，为了确保正常运行，我们需要安装相应的驱动程序。然而，很多朋友可能不知道在哪里可以找到Windows10的驱动程序。通常情况下，我们可以在C盘的drivers文件夹中找到Windows10的驱动程序。现在，让我们一起来了解一下具体的查找过程吧。win10驱动在哪：首先，我们需要按下键盘上的“Win徽标”和“R”键来打开运行窗口。在运行中，我们输入“devmgmt.msc”，然后点击“确定”。请展开想要查看的设备类型。如果你想了解更多关于设备类型的信息，请继续阅读

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Repo: How To Revive Teammates

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks agoByDDD

Hot Tools

SublimeText3 Linux new version

SublimeText3 Linux latest version

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.