定位的内容

最新推荐文章于 2024-11-16 14:38:55 发布

好好学java的xz

最新推荐文章于 2024-11-16 14:38:55 发布

阅读量151

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/m0_51945098/article/details/120524011

版权

本文详细介绍了CSS中的定位技术，包括静态定位、相对定位、绝对定位和固定定位。相对定位允许元素在原有位置上移动，而不影响其他元素布局；绝对定位则让元素脱离标准流，根据最近的定位祖先元素或浏览器窗口进行定位；固定定位则是元素固定在视口某一位置，即使页面滚动也不会改变。这些定位技术在网页布局中有着广泛应用，例如创建层叠效果、实现响应式设计等。

摘要由CSDN通过智能技术生成

1.为什么使用定位

定位可以让盒子自由的在另外一个盒子的内部移动位置
或者固定在屏幕中的某个位置，并且可以压住其他的盒子。

2定位使用方式

定位=定位模式+边偏移

2.1定位模式

1.静态定位static

2.相对定位relative

3.绝对定位absolute

4.固定定位fixed

2.2边偏移

(定义元素相对于其父元素某个方向上的距离)
top属性
bottom属性
left属性
right属性

3.使用定位
3.1静态定位static

1.默认的定位方式，无定位的意思，无实际含义
选择器{position:static;}

2特点：按照标准流布局，无偏移
3.2相对定位relative(常用！)

特点1：
相对定位是指元素在移动位置的时候，
相对于它原来的位置。
选择器{position:relative;}
在这里插入图片描述
量长度需要100% 分辨率也是

特点2：

原来在标准流的位置继续占有，保留原来的位置
(后面的盒子依然是标准流，所以没有脱标！)

案例：
css

.one{
			width: 150px;
			height: 150px;
			background-color: red;
			position: relative;
			top: 100px;
			left: 100px;
<!—top就是他的顶部往下移 -->
			}
			.two{
				width: 150px;
				height: 150px;
				background-color: yellow;
			}

html

<body>
		 <div class="one"></div>
		 <div class="two"></div>
	</body>

在这里插入图片描述

3.3绝对定位absolute(常用！)

注意：
比如加top：0，不加left父类也没设置定位,
子类设置绝对定位那么子类就会跟随浏览器顶部，左边会贴着父类。

可以使用百分比，但是缺点是缩小页面会被挤压，不好。

注意点1： 没有父级或父级无定位情况

注意点2： 移动位置的时候是相对于祖先元素来说的

绝对定位特点1：

如果没有祖先元素或者祖先元素没有定位，
则以浏览器为准定位

案例1：
css

 .one{
			 	width: 200px;
			 	height: 200px;
			 	background: red;
			 	position: absolute;			 	
			 	top: 20px;
			 	left: 20px;			 
}

html

<body>
		 <div class="one"></div>
		 
	</body>

在这里插入图片描述
注意点： 是根据浏览器，和外边距无关。

案例2：
css

.father{
			width: 200px;
			height: 200px;
			background-color: #00BFFF;
		}
		 .one{
		 	width: 100px;
		 	height: 100px;
		 	background: red;
		 	position: absolute;
		 	top: 30px;
		 	left: 30px;
		 }

html

<body>
		<div class="father">
		 	<div class="one"></div>
		</div> 
	</body>

在这里插入图片描述
注意点： 祖先元素没有定位，还是根据浏览器的。

绝对定位特点2：

如果祖先元素有定位(相对、绝对、固定定位)，
则以最近一级的有定位祖先元素为参考点移动位置。

案例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		.father{
			position: relative; /** 父元素相对定位**/
			width: 200px;
			height: 200px;
			background-color: #00BFFF;
		}
		 .one{
		 	width: 100px;
		 	height: 100px;
		 	background: red;
		 	position: absolute;
		 	top: 20px;
		 	right: 20px;
		 }			
		</style>
	</head>
	<body>
		<div class="father">
		 	<div class="one"></div>
		</div> 
	</body>
</html>

在这里插入图片描述
案例2：
css

.grandfather{
	position: relative; /** 爷爷有定位定位**/
	width: 400px;
	height: 400px;
	background-color: yellow;
}
.father{
	width: 300px;
	height: 300px;
	background-color: #00BFFF;
}
 .one{
 	width: 200px;
 	height: 200px;
 	background: red;
 	position: absolute;
 	top: 10px;
 	right: 10px;
 }

html

<body>
		<div class="grandfather">
			<div class="father">
			 	<div class="one"></div>
			</div> 
		</div>
	</body>

在这里插入图片描述
绝对定位特点3：

绝对定位不再占有原先的位置(脱标)

3.4绝对/相对定位总结

绝对定位和相对定位的使用场景：

(1)子绝父相:（这节最重要）

子级使用绝对定位，父级需要使用相对定位

(分析：父级需要占有位置，因此是相对定位，
子盒子不需要占有位置，则是绝对定位)
相对定位：position: relative;
绝对定位：position: absolute;
案例：
在这里插入图片描述
3.5固定定位fixed

元素固定于浏览器中的某个位置，
使用场景：浏览器页面滚动时位置不会改变
选择器{position:fixed;}

固定定位特点1：

以浏览器的可视窗口为参照点移动元素（缩小浏览器大小）

案例1：
css

.one{		 		 
	position: fixed;
	top: 0;
	left: 0;
}

html

<body>
	 <div class="one">
	 	<img src="img/1.png"/>
	 </div>
</body>

在这里插入图片描述

案例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		 	.one{		 		 
		 		position: fixed;
		 		top: 0;
		 		left: 0;
		 	}
		</style>
	</head>
	<body>
		 <div class="one">
		 	<img src="img/1.png"/>
		 </div>
		 <div style="height: 1000px;">
abcdef<br/>
		 abcdef<br/>
		 abcdef<br/>
		 abcdef<br/>
		 abcdef<br/>
		 abcdef<br/>
		 abcdef<br/>
		 abcdef<br/>
		 abcdef<br/>
		 abcdef<br/>
		 abcdef<br/></div>
	</body>
</html>