目录
一.定位的基本介绍
1.网页常见布局方式 定位
-
可以让元素自由的摆放在网页的任意位置
-
一般用于盒子之间的层叠情况
2.定位的常见应用场景
-
可以解决盒子与盒子之间的层叠问题
-
定位之后的元素层级最高,可以层叠在其他盒子上面
-
-
可以让盒子始终固定在屏幕中的某个位置
二.静态定位
position:static;
1.静态定位就是之前标准流,不能通过方位属性进行移动
2.之后说的定位不包括静态定位,一般特指后几种:相对、绝对、固定
<style>
/* <!-- css书写 1.定位 /浮动 /display ; 2.盒子模型 3.文字属性 --> */
.box {
position: static;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
三.相对定位:relative 简写:por
position:relative;
-
需要配合方位属性实现移动
-
相对于自己原来位置进行移动
-
在页面中占位置 → 没有脱标
-
应用场景:
-
配合绝对定位组CP(子绝父相)
-
用于小范围的移动
-
-
<style>
/* 如果left和right都有 已left为准 如果top和bottom都有 已top为准 */
/* <!-- css书写 1.定位 /浮动 /display ; 2.盒子模型 3.文字属性 --> */
.box {
position: relative;
left: 100px;
top: 200px;
/*
1.占有原来的位置
2.仍然