html css（部分）

定位

定位可以让指定元素在它原本正常布局流中应该在的位置移动到另一个位置。

定位属性

 position： 取值   相对定位 relative       绝对定位 absolute           固定定位 fixed        静态定位 static   偏移定位元素的位置  使用top、left、right、bottom来描述

通常水平位置通过left和right控制，垂直位置通过top和bottom控制。

left  设置定位元素离左的距离

top 设置定位的元素离上的距离

bottom 设置定位的元素离下的距离

right 设置定位的元素离右的距离

相对定位

相对于元素本身进行位置移动。不脱离文档流，站位。提升层级，不定义偏移量时对元素基本没有影响

绝对定位

相对于定位父级进行位置移动，如果没有定位父级则会一层一层找，直到找到，如果没有定位父级就找body。使元素脱离文档流，不站位，提升层级

固定定位

相对于浏览器窗口进行定位移动，及时窗口是滚动的它也不会移动。使元素脱离文档流，不站位，提升层级

静态定位

无定位样式

定位元素的层级顺序

z-index 提升层级  只限于定位中。

取值：数值； 数值越大，层级越高。

auto(默认值) 堆叠顺序与父元素相等

实现盒子居中的方法

方法一：

实现思路：margin负值配合百分比。

给需要垂直水平居中的元素设置css样式：

定位（position）取值：别使用默认值static

给top：50%；left：50%；

margin-top：负的元素的高度的一半；

margin-left：负的元素的宽度的一半；

即可。

方法二：

实现思路：left，right，top，bottom并用，配合margin：auto。

如果元素的四个边的位置是使用“top”、“right”、“bottom”和“left”来描述的，那么元素的“height”和“width”将隐式地由偏移量决定。 如果包含块是块级，则相对于包含块的边界即（包括padding），如果包含块是行级，则相对于包含块的内容区域。

注意：ie低版本不兼容！

定位对元素的影响

• 相对定位基本不改变元素本身的特性

• 绝对、固定定位

  • 脱离文档流

  • 提升元素层级

  • 未定宽度的块元素适应内容

  • 使行内元素生成块级框

  • 对浮动高度塌陷问题，margin值叠加问题的不同表现

• 注意：定位并不是一种用来做主要页面布局的方式，主要用于管理和微调页面中的一个特殊项的位置

7、定位与浮动的区别对比

7.1 使元素脱离文档流的属性

• float:left

• float:right

• postion:absolute

• position:fixed

7.2 表现上的区别

• 浮动元素： 使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本、图片、表单标签依然会为这个元素让出位置，环绕在周围

• 定位元素： 使用position脱离文档流的元素，其他盒子完全无视它，包括元素内部的文本、图片、表单标签

• 总结：

  • 不同点：浮动脱离文档流，不脱离文本流，定位元素既脱离文档流，又脱离文本流

  • 相同点：宽高默认由内容撑开，生成块级框（可以设置width和height及所有盒模型属性等）