css布局——定位布局

目录

四.定位布局

1.为什么需要定位布局

2.定位的组成

3.定位模式

4.边偏移

5.静态定位

6.相对定位

效果展示

7.绝对定位

效果展示

 8.子绝父相

9.固定定位

10.定位总结

---

四.定位布局

1.为什么需要定位布局

定位可以让盒子自由的在某个盒子内移动或固定在屏幕中的某个位置，并且可以压住某个盒子

2.定位的组成

定位：将盒子定在某一位置，所以定位也是在摆盒子按照定位的方式移动盒子

定位=定位模式+边偏移

定位模式：用于指定一个元素在文档中的定位方式

边偏移：决定该元素的最终位置

3.定位模式

定位模式决定元素的定位方式，通过css中的position属性定义，其值有四个

值	解释
static	静态定位
relative	相对定位
absolute	绝对定位
flxed	固定定位

4.边偏移

边偏移就是定位的盒子移动的最终位置有：top right left bottom 4个值

属性	示例	描述
top	top：18px	顶端与父元素上边框的距离
right	right：18px	右端与父元素右边框的距离
bottom	bottom：18px	下端与父元素下边框的距离
left	left：18px	左端与父元素左边框的距离

5.静态定位

静态定位是元素默认的定位方式，即无定位的意思

语法：

选择器 {                                     

             position： static ；     

}                                                  

• 静态定位按标准流特性摆放，他没有边偏移
• 静态定位很少用到

6.相对定位

相对定位（relative）是元素在移动位置的时候，是相对于他原来的位置

语法：

div {
 position: relative;
 top: 20px;
 left: 30px;
}

 相对定位特点：（重）

• 他是相对于自己原来的位置来移动的
• 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待定位的盒子（不脱标，保留原来的位置）
• 因此，相对定位并没有脱标，最典型的应用就是给绝对定位做父元素

效果展示

7.绝对定位

绝对定位（absolute）是元素在移动位置时是相对于他的带有定位祖元素来说

语法：

div  {
 position: absolute;
}

绝对定位的特点：

1. 如果没有祖元素或祖元素没有定位，则以浏览器为准
2. 如果祖元素有定位（相对定位和绝对定位）则最近一级有定位的祖元素为基准
3. 绝对定位不会占有原来的位置（脱标）

效果展示

 8.子绝父相

子绝父相是我们学习定位的口诀，是定位最常用的方式意为：子级是绝对定位，父级要用相对定位

由来：

1. 自己绝对定位，不会占用位置可以放到父盒子里面的任何一个地方，不会影响其他兄弟盒子
2. 父盒子需要加定位限制子盒子在父元素内显示
3. 父盒子布局时，需要占有位置，因此父元素只能是相对定位

这就是子绝父相的由来：所以相对定位常做绝对定位的父级

总结：因为父元素需要占有位置因此是相对定位，子盒子不需要占用位置则是绝对定位

9.固定定位

固定定位是元素固定于浏览器可视区域的位置

主要适用场景：可以在浏览器页面滚动时元素的位置不会改变

语法：

div {
 position: fixed;
 top: 10px;
 left:100px;
}

固定定位的特性：

1.浏览器的可视窗口为参照点移动元素

• 跟父元素没有任何关系
• 不随滚动条滚动而滚动

2.固定定位不在占有原来的位置（脱标）

• 固定定位也是脱标，可以看作特殊的绝对定位

10.定位总结

定位模式	是否脱标	移动参照	是否常用
static	否	不能移动	很少
relative	否	自身原来的位置	常用
absolute	是	带有定位的父元素	常用
fixed	是	浏览器可视区域	常用