CSS定位

最新推荐文章于 2025-06-13 08:04:55 发布

徐海.

最新推荐文章于 2025-06-13 08:04:55 发布

阅读量136

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/JAVAWEB_/article/details/107867164

版权

前端专栏收录该内容

11 篇文章

订阅专栏

定位

我们想要一些元素在页面滚动的情况下依然显示在他原来的位置我们就要使用定位来做
定位的组成
将盒子定在某一个位置，定位也是在摆放盒子，按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置

定位模式

通过CSS的position属性来设置，其值可以分为四个

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移

移动盒子到最终位置。有top，bottom，left和right 4个属性

边偏移属性	示例	说明
top	top:80px;	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom:80px;	底端偏移量，定义元素相对于其父元素下边线的距离
left	left:80px;	左端偏移量，定义元素相对于其父元素左边线的距离
right	right:80px;	右端偏移量，定义元素相对于其父元素右边线的距离

静态定位

静态定位是元素的默认定位方式，无定位的意思

选择器{position:static;}

相对定位 relative

是元素在移动位置的时候，是相对于它原来的位置来说的(自恋型)

选择器{position:relative;}

移动位置的时候参照点是自己原来的位置，他不会脱标，继续保留原来的位置
绝对定位 absolute
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

选择器{position:absolute;}

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位(Document文档)
如果祖先元素有定位(相对，绝对，固定)，则以最近一级的有定位祖先元素为参考点移动位置
绝对定位不再占有原先的位置（脱标）
使用绝对定位：子绝父相（子元素加了绝对定位，就给父元素加相对定位）

固定定位 fixed

元素固定于浏览器可视区的位置
语法

选择器{position:fixed;}

以浏览器的可视窗口为参照点移动元素，固定定位不在占有原先的位置
固定在版心右侧位置：让固定定位的盒子left:50;走到浏览器可视区的一半位置。在通过margin-left:版心宽度的一半距离。

粘性定位 sticky（了解）

算是相对加固定的混合
语法

选择器{position:sitcky;top:10px;}

占有原先的位置，以浏览器可视窗口为参照，必须添加一个边偏移

总结

定位模式	是否脱标	移动位置	是否常用
static静态定位	否	不能使用边偏移	很少
relative相对定位	否(占有位置)	相对于自身位置移动	常用
absolute绝对定位	是(不占有位置)	带有定位的父级	常用
fixed固定定位	是(不占有位置)	浏览器可视区	常用
sticky粘性定位	否(占有位置)	浏览器可视区	当前阶段少

定位的叠放次序 z-index

使用定位布局时，可以会出现盒子重叠的情况，此时我们可以使用z-index来控制盒子的前后次序(z轴)
语法：
选择器{z-index:1;}
数值可以是正整数，负整数或0，默认是auto,数值越大，盒子越靠上，按照书写顺序，后写居上，不用跟单位，只有定位的盒子才有z-index属性
浮动的盒子不会压住下面标准流的文字或者图片等，但是定位会压住下面标准流所有内容

案例

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			.tb-promo{
				position: relative;
				width: 520px;
				height: 280px;
				background-color: skyblue;
				margin: 100px auto;
			}
			.tb-promo img{
				width: 520px;
				height: 280px;
			}
			.prev,.next{
				position: absolute;
				top: 50%;
				margin-top:-15px;
				width: 20px;
				height: 30px;
				background-color: rgb(0,0,0,.3);
				text-align: center;
				line-height: 30px;
				color: #fff;
				text-decoration: none;
			}
			.prev{
				left: 0;
					/* 圆角 */
				border-radius: 0 15px 15px 0;
			}
			.next{
				right: 0;
				/* 圆角 */
				border-radius: 15px 0 0 15px;
			}
			.promo-nav{
				position: absolute;
				bottom: 15px;
				left: 50%;
				margin-left:-35px;
				width: 70px;
				height: 13px;
				background-color: rgb(255,255,255,0.3);
				border-radius: 7px;
			}
			.promo-nav li{
				float: left;
				width: 8px;
				height: 8px;
				background-color: #FFF;
				border-radius: 50%;
				margin: 3px;
			}
			.promo-nav .selected{
				background-color: #ff5000;
			}
		</style>
	</head>
	<body>
		<div class="tb-promo">
			<img src="../img/TB.jpg"/>
			<a href="#" class="prev">
				&lt;
			</a>
			<a href="#" class="next">
				&gt;
			</a>
			
			<ul class="promo-nav">
				<li class="selected"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>

元素的显示与隐藏

display属性

display:none; 隐藏对象
display:block; 除了转换为块元素之外，还有显示元素的意思
display隐藏元素之后不占有以前的位置

visibility 可见性

visibility :visible; 元素可见
visibility: hidden; 元素隐藏
visibility 隐藏元素后，继续还占有原来的位置

overflow 溢出

overflow:visible; 溢出了也给你显示出来
overflow:hidden; 溢出的部分不显示出来
overflow:scroll;显示滚动条
overflow:auto;溢出了才显示滚动条，不溢出不显示

案例

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.tudou{
				position: relative;
				width: 444px;
				height: 320px;
				background-color:skyblue;
				margin: 10px auto;
			}
			.tudou img{
				width: 100%;
				height: 100%;
			}
			.mask{
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgb(0,0,0,.4) url(../img/arr.png) no-repeat center;
			}
			.tudou:hover .mask{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="tudou">
			<div class="mask"></div>
			<img src="../img/tudou.jpg" />
		</div>
	</body>
</html>