CSS第六天——定位

CSS第六天——定位

1.CSS布局的三种机制

网页布局的核心——用CSS摆放盒子位置

CSS提供了3种机制来设置盒子的摆放位置，分别是普通流、浮动和定位，其中:
1.普通流(标准流)
2.浮动
让拿子从普通流中浮起来——让多个盒子(div)水平排列成一行。
3.定位
将盒子定在某一个位置 自由的漂浮在其他盒子的上面——CSS离不开定位，特别是后面的js特效。

2.为什么使用定位

1. 我们需要一个压在所有元素之上且能自由控制、不影响被压元素的元素
2. 有时也需要一个不随着鼠标滚动而滚动的固定在屏幕上的盒子

将盒子定在某一个位置 自由的漂浮在其他盒子（包括标准流和浮动）的上面

所以，我们脑海应该有三种布局机制的上下顺序
标准流 在 最底层(海底) -----浮动的盒子在 中间层(海面) ----- 定位的盒子 在 最上层(天空)

3.定位详细

定位由两部分组成：

定位 = 定位模式 + 边偏移

3.1边偏移

通过边偏移来实现移动位置 top 、 bottom 、left 、right 属性定义元素的边偏移：（方位名词）

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom: 80px	下端偏移量，定义元素相对于其父元素下边线的距离
left	left：80px	左端偏移量，定义元素相对于其父元素左边线的距离
right	right：80px	右端偏移量，定义元素相对于其父元素右边线的距离

3.2定位模式（position）

position: 属性值；

总的来说，定位模式有：

定位模式	值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

3.2.1静态模式-static：（了解）

静态定位是默认定位方式，相当于none，即没有定位

3.2.2相对定位-relative：（重要）

• 相对定位是元素相对于它原来在标准流中的位置来说的。 (自恋型)
• 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

3.2.3绝对定位-absolute：（重要）

• 绝对定位是元素以带有定位的父级元素来移动位置(拼爹型) （标准流的子盒子总是以父级为准移动位置）

1. 完全脱标——完全不占位置;
2. 父元素没有定位，则以浏览器为准定位(Document 文档)。
3. 父元素有定位，绝对定位子盒子以父级为准移动位置。（一级一级往上找 如果没有父级找爷级，只要是定位就行，除了静态定位）

• 定位口诀：子绝父相——子级用绝对定位，父级用相对定位

• 分析:
  1.方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。
  2.父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。

  • 如果父级盒子也使用绝对定位，会完全脱标，那么下方的盒子会上移,这显然不是我们想要的。

• 结论:

  父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

3.2.4固定定位-fixed：（重要）

1. 完全脱标——完全不占位置;

2. 只认浏览器的可视窗口——浏览器可视窗口 +边偏移属性 来设置元素的位置;
   跟父元素没有任何关系;
   不随滚动条滚动。

   img{
   	position: fixed;
   	right: 0px;
   	top: 0px;
   }
   

（IE6等低版本不支持固定定位）

4.定位的扩展

4.1绝对定位的盒子居中

1. left: 50%; :让盒子的左侧移动到父级元素的水平中心位置;
2. margin-left: -100px;: 让盒子向左移动自身宽度的一半。
   

4.2堆叠顺序（z-index）

z-index 的特性如下:
1.属性值:正整数、负整数或0.默认值是0,数值越大，盒子越靠上; z-index可以理解为z轴的纵深
2.如果属性值相同，则按照书写顺序，后来居上;
3.数字后面不能加单位。
注意:z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

4.3改变定位的display属性

我们最常用的显示模式是行内块(inline-block) —— 一行多个；宽度默认内容宽度

1. 声明display: inline-block 转换为行内块

2. 浮动（float）默认转化为“行内块”（不是真正的行内块，因为浮动是脱标的）

3. 绝对定位和固定定位也是默认转化为“行内块”

   /*1.利用display inline-block* /
   /*display: inline-block;*/
   /*行内块不给width默认的宽度就是内容的宽度*/
   /*2. 浮动也能转换*/
   /*float: left;*/
   /*3.绝对定位(固定定位)*/ 
   position:absolute;
   

所以说，一个行内的盒子，如果加了**浮动、固定定位、绝对定位，**那么就不用转换，直接放心地给它设置width和height就行了

注：

浮动元素，绝对定位元素不会触发外边距合并（塌陷）的问题，就不会有垂直外边距合并的的问题了

注：本文根据《黑马程序员-web前端》笔记改编