自学Web前端的第9天

定位的实现

• 位置属性

  • left：设置距离包含块左侧的距离

  • right：设置距离包含块右侧的距离

  • top：设置距离包含块顶部的距离

  • bottom：设置距离包含块底部的距离

• 取值

  • 长度值：px/em等

  • 百分比：相对于包含块计算

  • auto 默认值

  • 允许使用负值

  • 相对定位

    postion:relative;

    相对于元素在正常的文档流中的位置移动它，把一个正常布局流中的元素从它的默认位置按坐标进行相对移动。 它原本所占的空间不会改变。

    3.1.1 基础特性

  • 不脱离文档流

  • 提升元素层级

  • 不定义偏移量时对元素基本没有影响

  • 3.1.2 应用场景

    通常作为定位父级配合绝对定位使用

    3.2 绝对定位

    postion:absolute;

    没有定位父级时相对于HTML进行定位，有定位父级时相对于最近的定位父级进行定位。

    3.2.1 基础特性

  • 脱离文档流

  • 提升元素层级

  • 3.2.2 应用场景

    通常配合绝对定位使用（父相子绝）结合实际案例，如焦点图中的分页，翻页，视频网站中的 vip标签等。

    3.3 固定定位

    postion:fixed;

    元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。

    3.3.1 基础特性总结

  • 脱离文档流

  • 提升元素层级

  • 3.3.2 应用场景

    相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏。

    3.4 静态定位

    postion:static;

    表示“将元素放在文档布局流的默认位置，HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

    3.4.1 基础特性总结

  • 静态定位的元素不会受到 top， bottom，left，right影响

  • 3.4.2 应用场景

  • 常用于重置定位属性

  • 4、定位元素的层级顺序

    元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。 z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面或后面）。

  • 取值

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

    • 数值：拥有更高堆叠顺序（数值越大）的元素总是会处于堆叠顺序较低的元素的前面

  • 总结

    • 普通层，浮动层，定位层覆盖关系总结

    • 提示：从父原则

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

  • 绝对、固定定位

    • 脱离文档流

    • 提升元素层级

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

    • 使行内元素生成块级框

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

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

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

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

  • float:left

  • float:right

  • postion:absolute

  • position:fixed

  • 7.2 表现上的区别

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

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

  • 总结：

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

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

  • 5、实现盒子居中的方法

    方法一：

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

    方法二：

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

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

    注意：ie低版本不兼容！

    6、定位对元素的影响