web前端定位

最新推荐文章于 2024-07-14 10:25:44 发布

--believe

最新推荐文章于 2024-07-14 10:25:44 发布

阅读量881

点赞数

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

本文链接：https://blog.csdn.net/qq_44850917/article/details/104685451

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一，定位

1，定位作用：

将盒子定在某一个位置，自由的漂浮在其他盒子（包括标准流和浮动）的上面 所以我们脑海中应该有三种布局机制的上下顺序
标准流在最底层（海底）---浮动的盒子在中间层（海面）---定位的盒子在最上层（天空）

2，定位详解

定位也是用来布局的，它有两部分组成：
定位=定位模式+变偏移

2.1边偏移

简单说，我们定位的盒子，是通过边偏移来移动位置的。
在CSS中，通过 top botttom left right来移动位置的

在这里插入图片描述

2.2定位模式（position）

在CSS中，通过position属性定义元素的定位模式，语法如下：

选择器：{position:属性值;}

定位模式分类：
在这里插入图片描述

在这里插入图片描述

2.2.1静态定位（static）-了解

静态定位是元素的默认定位方式，无定位的意思
静态定位按照标准流特性摆放位置，他没有边偏移
静态定位在布局时我们几乎不用的

相对定位（relative）重要

相对定位是元素相对于它原来在标准流中的位置来说的

在这里插入图片描述

举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
		div{
			width: 200px;
			height: 200px;
			margin-top: 200px;
			margin-left: 200px;

			background-color: pink;
			position: relative;
			top:200px;
			left: 200px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

相对定位的特点（重点）：

相对于自己原来在标准流中位置来移动
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待他

举例：

<strong>相对定位的特点（重点）：<br><ul>
		<li>相对于自己原来在标准流中位置来移动</li>
		<li>原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待他</li>
	</ul></strong>

运行效果：

在这里插入图片描述

2.2.3绝对定位（absolute）重要

绝对定位是元素以带有定位的父级元素来移动位置

完全脱标---完全不占位置；
父元素没有定位，则以浏览器为准定位（文档）

在这里插入图片描述

父元素有定位
将元素依据最近的已经定位（绝对，固定，或者相对的定位）的父元素进行定位

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.father{
			background-color: pink;
			width: 300px;
			height: 300px;
			margin: 100px;
			/*position: absolute;
			top: 10px;
			left: 10px;*/
			/*标准流的子盒子总是以父级为准移动位置*/

			/*绝对定位，如果父级没有定位 绝对定位以文档定位*/

		}
		.son{
			background-color: purple;
			width: 200px;
			height: 200px;
			/*margin-left: 100px;*/
			position: absolute;
			top:10px;
			left:10px;
		}
		.grandfather{
			width: 400px;
			height: 400px;
			background-color: gray;
			position: relative;
		}
	</style>
</head>
<body>
<div class="grandfather">
<div class="father">
		<div class="son"></div>
	</div>
</div>
	
</body>
</html>

运行结果：

在这里插入图片描述

绝对定位的特点：

绝对是以带有定位的父级元素来移动位置，如果父级都没有定位，则以浏览器文档为准移动位置
不保留原来的位置，完全是脱标的

--believe

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web前端定位

一，定位 1，定位作用：将盒子定在某一个位置，自由的漂浮在其他盒子（包括标准流和浮动）的上面所以我们脑海中应该有三种布局机制的上下顺序标准流在最底层（海底）---浮动的盒子在中间层（海面）---定位的盒子在最上层（天空） 2，定位详解定位也是用来布局的，它有两部分组成：定位=定位模式+变偏移2.1边偏移简单说，我们定位的盒子，是通过边偏移来移动位置的。在CSS中，通过 top...
复制链接

扫一扫