二十，CSS定位概述与相对定位

最新推荐文章于 2022-10-30 09:00:12 发布

好多可乐

最新推荐文章于 2022-10-30 09:00:12 发布

阅读量94

点赞数

分类专栏： CSS基础

本文链接：https://blog.csdn.net/qq_36792120/article/details/111224250

版权

CSS基础专栏收录该内容

28 篇文章 0 订阅

订阅专栏

CSS定位：
position：relative(相对)/absolute(绝对)/ static(无定位)/ fixed(固定)
文档流：从上往下，从左到右
相对定位：
relative：相对于自己以前所在的位置进行定位，效果如下图（本来在左上角，设置相对定位和top，left属性后，红色方块进行了移动）
在这里插入图片描述

如果设置了相对定位以后，不输入具体的top/left值，这样相对定位可以做为一种容器父元素存在。

<html>
<head>
   <style type="text/css">
   .main{
   	background-color: yellow;
   }
   .div1{
   	height: 100px;
   	width: 100px;
   	position: relative;
   	top: 10px;
   	left: 20px;
   	background-color: red;
   }
   </style>
</head>
<body>
 <div class="main">