【Web前端笔记-基础】第十课·初识 CSS，CSS属性（定位）。

最新推荐文章于 2020-12-09 15:36:00 发布

好好学习嘿嘿嘿

最新推荐文章于 2020-12-09 15:36:00 发布

阅读量157

点赞数

分类专栏： Web 前端基础笔记文章标签：定位 css基础笔记

本文链接：https://blog.csdn.net/qq_42250032/article/details/102621947

版权

Web 前端基础笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

Position:定位

position在英文里是定位的意思，这里主要是用来实现对元素的定位。
CSS的定位分成3种：固定定位（fixed），相对定位（relative）和绝对定位（absolute）。
在给元素定位时，一定要注意配合坐标来使用：left（定位元素离左边多远），right（定位元素离右边多远），bottom，top。它们的值都是像素值。

固定定位

固定定位是相对于浏览器窗口来定位的，对于固定定位元素来说，只要浏览器窗口不动，固定定位元素也不会移动，无论页面的滚动轮如何移动，固定定位元素的位置也不会发生改变。另外，固定定位元素是脱离了标准文档流的，当固定定位元素和标准文档流中的元素位置发生冲突时，固定定位元素会覆盖标准文档流中的元素。

例子1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>固定定位小练习</title>
		<style type="text/css">
			#back{
				
				display: block;
				width: 80px;
				height: 50px;
				background-color: #808080;
				text-align: center;
				line-height: 25px;
				position: fixed;
				right: 30px;
				bottom: 100px;
				
			}
			a{
				display: block;
				width: 80px;
				height: 50px;
			}
			a:link,a:visited{
				color: white;
				text-decoration: none;
			}
			a:hover{
				color: #000000;
				background-color: white;
			}
		</style>
	</head>
	<body>
		<img src="../img/hehua.jpg" >
		<img src="../img/hehua.jpg" >
		<img src="../img/hehua.jpg" >
		<img src="../img/hehua.jpg" >
		<img src="../img/hehua.jpg" >
		<img src="../img/hehua.jpg" >
		<span id="back">
			<a href="#">返回<br>顶部</a>
		</span>
		
	</body>
</html>

效果：

例子2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>固定定位练习2</title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			body{
				font-size: 20px;
				font-family: "微软雅黑";
				background-image: url(../img/beijing.jpg);
			}
			
			.th{
				width: 960px;
				height: 40px;
				margin-left: auto;
				margin-right: auto;
				/* position: fixed; */
			}
			ul{
				list-style: none;
			}
			ul li{
				float: left;
				width: 160px;
				height: 40px;
				background-image: url(../img/diwenbiaoti.jpg);
				text-align: center;
				line-height: 40px;
			}
			
			a{
				text-decoration: none;
				color: #000000;
				display: block;
				width: 160px;
				height: 40px;
				
			}
			a:hover{
				color: #4169E1;
				font-size: 24px;
				font-weight: bold;
				background-color: white;
			}
			.men{
				position: fixed;
				left: 240px;
				top: 0px;
			}
		</style>
	</head>
	<body>
		<div class="men">
			<div class="th">
				<ul>
					<li><a href="">标题</a></li>
					<li><a href="">标题</a></li>
					<li><a href="">标题</a></li>
					<li><a href="">标题</a></li>
					<li><a href="">标题</a></li>
					<li><a href="">标题</a></li>
				</ul>
			</div>
		</div>
		<img src="../img/hehua.jpg" >
		<img src="../img/hehua.jpg" >
		<img src="../img/hehua.jpg" >
		<img src="../img/hehua.jpg" >
	</body>
</html>

效果：

相对定位

相对定位元素是相较于相对定位元素自己最初的位置来定位的，另外，相对定位元素是没有脱离标准文档流的，所以如果相对定位元素不设置坐标的话，相对定位元素的位置不会发生变化，但是如果给相对定位元素设置了坐标，那么，原来相对定位元素的位置就会留下一个坑，而且，如果和其他元素有位置冲突的话，相对定位元素也会覆盖与之冲突的元素。

注意：相对定位元素很少使用，它一般是配合绝对定位元素来使用的。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位小练习</title>
		<style type="text/css">
			.rel{
				width: 300px;
				height: 300px;
				border: 1px solid #4169E1;
			}
			.rel1{
				width: 100px;
				height: 100px;
				background-color: #FF0000;
			}
			.rel2{
				width: 100px;
				height: 100px;
				background-color: #0f0;
				position: relative;
				left: 50px;
				top: 50px;
				
			}
			.rel3{
				width: 100px;
				height: 100px;
				background-color: #00f;
			}
		</style>
	</head>
	<body>
		<div class="rel">
			<div class="rel1"></div>
			<div class="rel2"></div>
			<div class="rel3"></div>
		</div>
	</body>
</html>

效果：

绝对定位

绝对定位：绝对定位是相对于祖先定位元素来进行定位的，这里的祖先定位元素可以是绝对定位元素，相对定位元素，也可以是绝对定位元素，但一般都是相对定位元素。如果祖先没有一个是定位的元素，那么就会相对于窗口进行定位。另外，如果其祖先有多个是定位元素，那么会对于最近的定位元素定位。绝对定位元素是脱离了标准文档流的，所以也会对标准文档流中的元素覆盖。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位练习</title>
		<style type="text/css">
			.out{
				margin: 100px;
				border: 1px solid black;
				position: relative;
			}
			
			#up{
				position: absolute;
				left:7px;
				top:-6px;
			}
		</style>
	</head>
	<body>
		<div class="out">
			<img id="dow" src="../img/miana.png" >
			<img id="up" src="../img/mianb.png" >
			
		</div>
		<img src="../img/danghang.jpg" >
		<img src="../img/danghang.jpg" >
		<img src="../img/danghang.jpg" >
		<img src="../img/danghang.jpg" >
		<img src="../img/danghang.jpg" >
		<img src="../img/danghang.jpg" >
		<img src="../img/danghang.jpg" >
		<img src="../img/danghang.jpg" >
		<img src="../img/danghang.jpg" >
		<img src="../img/danghang.jpg" >
		<img src="../img/danghang.jpg" >
	</body>
</html>

效果：

好好学习嘿嘿嘿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Web前端笔记-基础】第十课·初识 CSS，CSS属性（定位）。

Position:定位position在英文里是定位的意思，这里主要是用来实现对元素的定位。 CSS的定位分成3种：固定定位（fixed），相对定位（relative）和绝对定位（absolute）。在给元素定位时，一定要注意配合坐标来使用：left（定位元素离左边多远），right...
复制链接

扫一扫