Day 15 CSS <网页布局-定位布局-1.定位模式>

为什麽需要定位元素?

定位元素可以实现 :

• 某个元素可以自由地在一个盒子内移动位置，并且压住其他盒子
• 当滚动窗口的时候，盒子是固定屏幕某个位置的

所以 :

• 浮动是可以让多个块级盒子一行没有缝隙排列显示，经常用於横向排列盒子
• 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

定位就是将盒子定在某一个位置

所以定位也是在摆放盒子，按照定位的方式移动盒子。

• 定位 = 定位模式 + 边偏移

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

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

1. 定位模式

定位模式决定元素的定位方式，通过CSS的 position属性来设置 分为四种

/*
position: static;       静态定位 
position: relative;     相对定位
position: absolute;     绝对定位
position: fixed;        固定定位
*/

a. 静态定位 static

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

语法 :

选择器 { position:static;}

备注 :

• 静态定位按照标准布局特性摆放位置，没有边偏移

b. 相对定位 relative (重要)

相对定位是元素在移动位置的时候，以相对它原来的位置来设为标准

语法 :

选择器 { position:relative;}

备注 :

• 移动的时候参照点是自己原来的位置
• 不脱离标准布局，继续保留原来位置
• 相对定位并没有脱标，最典型的应用是给绝对定位的父盒子使用

c. 绝对定位 absolute (重要)

绝对定位是元素在移动位置的时候，是看父元素来进行移动的

语法 :

选择器 { position:absolute;}

备注 :

• 没有祖先元素或者祖先元素没有定位，则以浏览器为准进行定位
• 如果祖先元素有定位，则以最近一级的有定位祖先元素为参考移动位置
• 绝对定位不在占有原本的位置 (脱离标准定位)

PS : 绝对定位的盒子居中

加了绝对定位的盒子不能透过margin:0 auto水平居中

但是可以通过以下计算方法实现水平和垂直居中

水平居中
*/* 1. left 走 %50 */*
*/* 2. margin-left 负值 往左边走 自己盒子宽度的一半 */*

垂直居中
*/* 1.top 走 %50 */*
*/* 2. margin-top 负值 往下边走 自己盒子高度的一半 */*

d. 固定定位 fixed (重要)

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

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

语法 :

选择器 { position: fixed;}

备注 :

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

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

2. 固定定位不在占有原先的位置

• 固定定位也是脱离标准流，固定定位也可看作是一种特殊的绝对定位
• 固定定位小技巧 : 固定在板心右侧的位置

算法 :

1. 让固定定位的盒子left : 50% 走到浏览区可视区(也可以看作板心) 的一半位置

2. 让固定定位的盒子margin-left : 版心宽度的一半距离。
   多走板心宽度的一半位置，就可以让固定定位的盒子贴着板心右侧对齐

e. 黏性定位 sticky

黏性定位可以被认为是相对定位和固定定位的混和。

语法 :

选择器 { position:sticky; top: 10px;}

备注 :

• 以浏览器的可视窗口为参照点移动元素( 固定定位特点 )
• 黏性定位占有原先的位置 ( 相对定位特点 )
• 必须添加 top , left , right , bottom 其中一个才有效，跟页面滚动搭配使用。兼容性较差 IE不支持