Web_CSS_DIV相对浏览器定位及其关闭；

最新推荐文章于 2021-08-04 05:31:49 发布

cyb_23

最新推荐文章于 2021-08-04 05:31:49 发布

阅读量1.4k

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/cyb_23/article/details/20370253

版权

Web 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

功能：DIV相对浏览器定位及其关闭。

>html源码

<html>
	<head>
		<title>hello</title>
		<style tyle="text/css">
			html,body {
				width:100%;
				height:100%;
				margin:0px;
				padding:0px;
				overflow:hidden;	//溢出隐藏；解决IE8滚动条问题；
			}
		
			#Main {
				position:absolute;
				top:0px;
				left:0px;
				width:100%;
				height:100%;
				overflow:auto;	//能显示完所有内容；
				z-index:1;
			}
		
			.floatDiv {
				position:absolute;
				top:50px;
				right:30px;
				padding: 3 3 3 3;
				background:#ccc;
				text-align:right;
				z-index:2;
			}
			
			.close {
				background-color:#CC6600;
				cursor: pointer;
				color: #FFFFFF;
			}
		</style>
		<script type="text/javascript" src="hello.js"></script>
	</head>
	
	<body>
		<div id="Main">
			First,hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			hello,world!<br />
			last,hello,world!<br />
		</div>
		<div id="fDiv" class="floatDiv">
			<div><span id="closeBtn" class="close">关闭</span></div>
			<img src="img/sleep.jpg" width="200" height="150" />
		</div>
	</body>
</html>

>js源码

window.onload = initFn;

function initFn() {
	// 关闭按钮
	var closeBtn = document.getElementById("closeBtn");
	closeBtn.onclick = function(){
		// 浮动DIV
		var floatDiv = document.getElementById("fDiv");
		floatDiv.style.display	= 'none';		//不显示；
	}
	
}

cyb_23

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Web_CSS_DIV相对浏览器定位及其关闭；

功能：DIV在屏幕中的绝对定位。 hello html,body { width:100%; height:100%; margin:0px; padding:0px; overflow:hidden; //溢出隐藏；解决IE8滚动条问题； } #Main { position:absolute; t
复制链接

扫一扫

专栏目录