定位的内容

最新推荐文章于 2024-06-16 22:13:37 发布

好好学java的xz

最新推荐文章于 2024-06-16 22:13:37 发布

阅读量114

点赞数

文章标签： css html html5

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

版权

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>

在这里插入图片描述

图片不会动在最上面的

固定定位特点2：

固定定位不占有原先的位置

4.总结

1.标准流
可以让盒子上下(块级)去排列或者左右(行内)排列，
垂直的块级盒子显示就用标准流布局

2.浮动
可以让多个块级元素一行显示或者左右对齐盒子，
多个块级盒子水平显示就用浮动布局

3.定位
定位最大的优势就是有层叠的概念，可以让多个盒子前后叠压来显示，
如果元素自由在某个盒子内移动就用定位布局。

前端都是盒子一个一个的来做（很重要）

----2021.09.28

好好学java的xz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定位的内容

1.为什么使用定位定位可以让盒子自由的在另外一个盒子的内部移动位置或者固定在屏幕中的某个位置，并且可以压住其他的盒子。2定位使用方式定位=定位模式+边偏移2.1定位模式1.静态定位static2.相对定位relative3.绝对定位absolute4.固定定位fixed2.2边偏移(定义元素相对于其父元素某个方向上的距离)top属性bottom属性left属性right属性3.使用定位3.1静态定位static1.默认的定位方式，无定位的意思，无实际含义选择器{posi
复制链接

扫一扫