但是这个DIV，不随窗口大小变化跟随到图标旁边，一直固定到了1081px。一缩小窗口，点击后就看不见了，除非将窗口拉到1081px宽度才行，但是位置却不是在图标旁边，偏移了
我希望他能想“更多”图标的DIV一样，无论窗口大小怎么样，都能出现在“更多”图标的旁边。
而且我发现“更多”图标的DIV的"element.style"内联样式的"left"也是跟着窗口变化的，而我的貌似是定死的。
//调用函数把CSS样式添加到 段的 元素中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("");//隐藏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 = ' ' + ' ' + '旧版弹窗播放' + ' ' + '' + ' ' + '新版弹窗播放' + ' ' + ' ' + ' ' + '
查看更多关于DIV+CSS，如何使DIV跟随窗口大小改变位置，跟随住某个点击显示的图标_html/css_WEB的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did105169