Home > Article > Web Front-end > DIV+CSS，如何使DIV跟随窗口大小改变位置，跟随住某个点击显示的图标_html/css_WEB-ITnose

DIV+CSS，如何使DIV跟随窗口大小改变位置，跟随住某个点击显示的图标_html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 12:03:272040browse

手头有以下代码，是给某个播放器添加一个新的图标功能，设置了一个隐藏的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;
这样在任何分辨率下位置都不会变了

实际上我自己通过特殊方法功课了~你说的那种我不会，所以用了其他定位方法。我看看还有没有人回复，没有的话就给你分吧

js先获取音乐图标的top很left位置，然后把这个获取的值加上图标本身的宽高，再赋值到弹出窗口的left跟top上边，这样不就图标在哪里，弹出在哪里的吗。

我自己就是用这种方法攻克的

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

Previous article：jquery中回调函数的问题,大虾帮忙解决一下~_html/css_WEB-ITnoseNext article：玩转CSS3(一)CSS3实现页面布局_html/css_WEB-ITnose

See more

DIV+CSS，如何使DIV跟随窗口大小改变位置，跟随住某个点击显示的图标_html/css_WEB-ITnose

回复讨论(解决方案)

Related articles