web前端复习第五课

最新推荐文章于 2024-11-07 13:38:59 发布

思丰百年

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量189

点赞数

分类专栏： web前端开发复习，从头再来文章标签： javascript css html html5

本文链接：https://blog.csdn.net/qq_39664934/article/details/107144360

版权

web前端开发复习，从头再来专栏收录该内容

22 篇文章 0 订阅

订阅专栏

固定定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box1{
			width: 600px;
			height: 500px;
			background-color: #f00;
			margin: 0 auto;
		}
		.box2{
			width: 600px;
			height: 500px;
			background-color: #00f;
			margin: 0 auto;
		}
		.box3{
			width: 600px;
			height: 500px;
			background-color: #0f0;
			margin: 0 auto;
		}
		.box4{
			width: 200px;
			height: 200px;
			background-color: #ff0;
			
			/*定位没有去不了的地方*/
			/*特点：脱离文档流,根据浏览器窗口进行定位*/
			position: fixed;
			/*固定定位  可以使用百分比*/
			top: 100px;
			left: 50%;
			margin-left: -100px;

			/*配合定位属性使用的改变层级的方法*/
			/*默认层级是0*/
			z-index: 2;
		}
		.box5{
			width: 200px;
			height: 200px;
			background-color: #000;
			
			/*定位没有去不了的地方*/
			/*特点：脱离文档流,根据浏览器窗口进行定位*/
			position: fixed;
			/*固定定位*/
			top: 50%;
			left: 120px;
			margin-top: -100px;

			z-index: 1;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
	<div class="box5"></div>
</body>
</html>

相对定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 200px;
			background-color: #f00;
			margin: 100px auto 0px;
		}
		.box2{
			width: 200px;
			height: 200px;
			background-color: #0f0;
			margin: 0 auto;

			/*相对定位：主要是用来辅助绝对定位的，
			不脱离文档流，根据自己原来的位置进行定位的*/
			position: relative;
			top: 0;
			left: 0;
		}
		.box3{
			width: 200px;
			height: 200px;
			background-color: #00f;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
</body>
</html>

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box1{
			width: 600px;
			height: 600px;
			border: 1px solid #000;
			margin: 0 auto;
			/*相对定位，添加上以后对自己没有任何影响*/
			position: relative;
		}
		.box2{
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			margin: 0 auto;
		}
		.box3{
			width: 200px;
			height: 200px;
			border: 1px solid #000;
			margin: 0 auto;
			background-color: #ccc;

			/*绝对定位：脱离文档流，根据已有定位元素的父元素进行定位*/
			/*子绝父相*/
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
</head>
<body>
	<div class="box1">
		<div class="box2">
			<div class="box3"></div>
		</div>
	</div>
</body>
</html>