Html文档流position

最新推荐文章于 2022-06-08 19:13:05 发布

丷寒枫丷

最新推荐文章于 2022-06-08 19:13:05 发布

阅读量163

点赞数

分类专栏： Html

本文链接：https://blog.csdn.net/qq_24432127/article/details/88984199

版权

Html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style>
			#div1 {
				border: 1px solid red;
				width: 100px;
				height: 100px;
				position: static; /* 默认文档流是static设置 */
			}

			#div2 {
				border: 1px solid blue;
				width: 100px;
				height: 100px;

				position: absolute; /* 脱离html文档流使其自己设置定位 是相对整个页面的定位 */
				/* left:300px;
				top: 250px; */
				/* right: 0px;
				bottom: 0px; */
				right: 100px;
				bottom: 300px;
			}

			#div3 {
				border: 1px solid lime;
				width: 100px;
				height: 100px;
				position:fixed; /* 脱离html文档流使其自己设置定位 是相对整个电脑屏幕进行定位 */
				right: 300px;
				bottom: 300px;
			}
			#div4
			{
				border: 1px solid yellow;
				width: 100px;
				height: 100px;
				position: relative; /* 脱离html文档流使其自己设置定位 是相对原来文档流中的位置进行定位 */
				left: 50px;
				top: 50px;
			}
			
			/* position:inherit 指该元素继承于父元素 */
			
			/* ----------------------------------------------------------------- */
			
			
			#div5
			{
				background-color:blue;
				width: 100px;
				height: 100px;
				position:absolute; 
				left: 100px;
				top: 500px;
				z-index: 100; /* 设置元素的层级 谁在谁在的上面 */
			}
			
			#div6
			{
				background-color: red;
				width: 100px;
				height: 100px;
				position: absolute; 
				left: 120px;
				top: 520px;
				z-index: 99;
			}
			
			#div7
			{
				background-color: yellow;
				width: 100px;
				height: 100px;
				position: absolute; 
				left: 140px;
				top: 540px;
				z-index: 98;
			}
			
			
			
		</style>

	</head>
	<body>
		<div id="div1">div1</div>
		<div id="div2">div2</div>
		<div id="div3">div3</div>
		<div id="div4">div4</div>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		换行<br>
		<div id="div5"></div>
		<div id="div6"></div>
		<div id="div7"></div>
	</body>
</html>

丷寒枫丷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html文档流position

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #div1 { border: 1px solid red; width: 100px; height: 100p...
复制链接

扫一扫

专栏目录