CSS定位的一些个人理解
本人是还没有入门的技术小白,仅以此篇记录成长,欢迎大家一起讨论学习,也欢迎在评论区指出问题~~
言归正传啦,以下是关于CSS中定位的个人理解。
一、分类
在CSS中定位分为:static静止定位、relative相对定位、absolute绝对定位、fixed固定定位、inherit继承定位。本文主要讨论相对定位,绝对定位与固定定位。
二、应用
(1)相对定位
相对自己的原始位置定位
就是在没添加定位前,它已经占了一个位置了,应用相对定位后,是相对于它本来该在的位置上下左右移动。但是它之前的位置还是给它留着的。之前看到有人给相对定位比喻成进城打工的人,虽然进城了,但是老家还是有房子的,不会因为人进城打工,老家的房子就没了。下面引入代码,大家可以运行一下感受相对定位。
先做一些准备
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
*{
margin: 0;/*去掉系统自带的一些边距*/
padding: 0;
}
.big{
/*为了看上去比较直观,我们定义了一个大盒子和小盒子*/
width: 1000px;
height:1000px;
background-color: gray;
}
.small{
width: 300px;/*定义一个边长为300像素的黄色小正方形*/
height: 300px;
background-color: yellow;
}
</style>
</head>
<body