CSS定位

最新推荐文章于 2022-03-31 22:32:54 发布

weixin_43312083

最新推荐文章于 2022-03-31 22:32:54 发布

阅读量160

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43312083/article/details/99223655

版权

前端专栏收录该内容

85 篇文章 5 订阅

订阅专栏

定位(position)

background-position 背景定位

如果，说浮动，关键在一个 “浮” 字上面，那么我们的定位，关键在于一个 “位” 上。

元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

也就说，以后定位要和这边偏移搭配使用了，比如 top: 100px; left: 30px; 等等

2、定位模式(定位的分类)

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

1.静态定位(static)

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。

上面的话翻译成白话：就是网页中所有元素都默认的是静态定位哦！其实就是标准流的特性。

在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

PS：静态定位其实没啥可说的。

静态定位唯一的用处：就是取消定位。 position: static;（取消定位通过position: static ）

2.相对定位relative(自恋型)

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如下图所示，即是一个相对定位的效果展示：

注意：

相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）

如果说浮动的主要目的是让多个块级元素一行显示，那么定位的主要价值就是移动位置，让盒子到我们想要的位置上去。

相对定位小例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div {
		width: 200px;
		height: 200px;
		background-color: pink;
		
	}
	.top {

		position: relative; 
		top: 100px;
		left: 100px;
	}
	.bottom {
		background-color: purple;
	}
	</style>
</head>
<body>
	<div class="top"></div>
	<div class="bottom"></div>
</body>
</html>

效果图：

3.绝对定位absolute (拼爹型)

　[注意] 如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

注意：绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

3.1父级没有定位

若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.father {
		width: 500px;
		height: 500px;
		background-color: pink;
		margin: 100px;
	}
	.son {
		width: 200px;
		height: 200px;
		background-color: purple;
		position: absolute;
		top: 50px;
		left: 50px;
		/*若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。*/
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

效果图：

3.2父级有定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.yeye {
		width: 800px;
		height: 800px;
		background-color: skyblue;
		position: absolute; /*父级有定位绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。*/ 
	}
	.father {
		width: 500px;
		height: 500px;
		background-color: pink;
		margin: 100px;
		/*position: absolute;*/
	}
	.son {
		width: 200px;
		height: 200px;
		background-color: purple;
		position: absolute;
		top: 50px;
		left: 50px;
		/*若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。*/
	}
	</style>
</head>
<body>
<div class="yeye">
	<div class="father">
		<div class="son"></div>
	</div>
</div>
	
</body>
</html>

子绝父相

这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。

这句话的意思是子级是绝对定位的话，父级要用相对定位。

编程例子1：（子绝父相）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">   <!-- 子绝父相 -->
	<title>Document</title>
	<style>
	div {
		width: 310px;
		height: 190px;
		border: 1px solid #ccc;
		margin: 100px auto;
		padding: 10px;
		position: relative;  /*父亲相对位置*/
	}
	.top {
		position: absolute; /*儿子绝对位置*/
		top: 0;
		left: 0;
	}
	
	.bottom {
		position: absolute; 
		right: 0;
		bottom: 0;
	}
	
	</style>
</head>
<body>
	<div>
		<img src="images/top_tu.gif" alt="" class="top">
		<img src="images/br.gif" alt="" class="bottom">
		<img src="images/adv.jpg" height="190" width="310" alt="">
	</div>
</body>
</html>

编程例子2：

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	.sf {
		width: 1259px;
		height: 472px;
		margin: 100px auto;
		position: relative;
	}
	.nav {
		width: 960px;
		height: 80px;
		background-color: #000;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -480px;
	}
	.nav li {
		float: left;
		width: 160px;
		height: 80px;
		list-style: none;
	}
	.nav li a {
		width: 160px;
		height: 80px;
		display: block;   /*a不是块级元素，转化为块级元素才能设置宽和高。*/
		text-align: center;
		line-height: 80px;
		color: #fff;
		text-decoration: none;
	}
	.nav li a:hover {
		background-color: #fff;
		color: #000;
	}
	</style>
</head>
<body>
	<div class="sf">
		<a href="#">
			<img src="images/sf.png" height="472" width="1259" alt="">
		</a>
		<div class="nav">
			<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>
</body>
</html>

编程例子3：

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	li {
		list-style: none;
	}
	.tb {
		width: 520px;
		height: 280px;
		background-color: pink;
		margin: 100px auto;
		position: relative;
	}
	.tb a {
		width: 24px;
		height: 36px;
		
		display: block;
		position: absolute;
		top: 50%;
		margin-top: -18px;
	}
	.left {
		left: 0;
		background: url(images/left.png) no-repeat;
	}
	.right {
		right: 0;
		background: url(images/right.png) no-repeat;
	}
	.tb ul {
		width: 70px;
		height: 13px;
		background: rgba(255, 255, 255, .3);
		position: absolute; /* 加定位*/
		bottom: 18px;
		left: 50%; /*水平走父容器的一半*/
		margin-left: -35px; /*左走自己的一半*/
		border-radius: 8px;
 	}
 	.tb ul li {
 		width: 8px;
 		height: 8px;
 		background-color: #fff;
 		float: left;
 		margin: 3px;
 		border-radius: 50%;
 	}
 	.tb .current {
 		background-color: #f40;
 	}
	</style>
</head>
<body>
	<div class="tb">
		<img src="images/tb.jpg" >
		<a href="#" class="left"></a>
		<a href="#" class="right"></a>
		<ul>
			<li class="current"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>

	</div>
</body>
</html>

4.固定定位fixed(认死理型)

固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位有两点：

固定定位的元素跟父亲没有任何关系，只认浏览器。
固定定位完全脱标，不占有位置，不随着滚动条滚动。

固定定位广告案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	.top {
		height: 44px;
		background: url(images/top.png) no-repeat top center;
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
	}
	.box {
		margin: 44px auto 0;
		width: 1002px;
	}
	.ad-l, .ad-r {
		position: fixed;
		top: 100px;
	}
        .ad-r {
                left: 0;
	.ad-r {
		right: 0;
	}

	</style>
</head>
<body>
	
	<div class="top"></div>
	<div class="box">
		<img src="images/box.png" height="1760" width="1002" alt="">
	</div>
	<img src="images/ad-l.png" height="288" width="120" alt="" class="ad-l">
	<img src="images/ad-r.png" height="288" width="120" alt="" class="ad-r">
</body>
</html>

定位模式转换

跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式，

行内块的宽度和高度跟内容有关系

** 因此比如行内元素如果添加了绝对定位或者固定定位后浮动后，可以不用转换模式，直接给高度和宽度就可以了。**

元素加过固定定位和绝对定位(浮动)后，都会转化为行内块元素，行内块元素的宽和高由文字的宽高或背景图片的宽高决定。

img 行内块元素，行内块元素的宽高由文字的宽高或背景图片的宽高决定。

背景图片和插图图片的区别

背景图片通常为 img 为行内块元素，

插入图片 background: url(images/top.png) no-repeat top center 会撑开盒子。

叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

比如： z-index: 2; font-weight: 700

注意：

z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
如果取值相同，则根据书写顺序，后来居上。
后面数字一定不能加单位。
只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div {
		width: 200px;
		height: 200px;
		background-color: red;
		position: absolute;
		/*z-index: 0;  只有定位的盒子才有*/
	}
	.red {
		z-index: 1;
	}
	.blue {
		background-color: blue;
		left: 50px;
		top: 50px;
		z-index: 2;
	}
	.green {
		background-color: green;
		left: 100px;
		top: 100px;
		z-index: 999;
	}
	</style>
</head>
<body>
	<div class="red"></div>
	<div class="blue"></div>
	<div class="green"></div>
</body>
</html>

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	脱标，占有位置	可以	相对自身位置移动（自恋型）
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置（拼爹型）
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置（认死理型）

weixin_43312083

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS定位

定位(position)background-position 背景定位如果，说浮动，关键在一个 “浮” 字上面，那么我们的定位，关键在于一个 “位” 上。元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分。1、边偏移边偏移属性描述 top 顶端偏移量，定义元素相对于其父元素上边线的距离 bottom 底部偏移量，定义元素相对于其父...
复制链接

扫一扫