css 定位

9.27

定位

普通文档流中块元素垂直排列，行内元素水平排列。 浮动可以实现多个块级盒子在一行无缝排列显示

定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置

定位属性

position 取值 相对定位 relative 绝对定位 absolute

固定定位 fixed 静态定位 static

边偏移定位元素的位置，使用top、right、bottom和left来描述。

通常水平位置通过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及所有盒模型属性等）