定位与浮动
定位（position）
静态定位（static）
- 静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。
- 静态定位 按照标准流特性摆放位置，它没有边偏移。
- 静态定位在布局时就是个废物
固定定位（fixed）
- 相对于浏览器可视区固定位置，脱离文档流
相对定位（relative）
- 相对于原本的位置（依然会占据原来的空间），不会脱离原本的文档流
绝对定位（absolute）
- 相对于离他最近的已定位的父级定位，如果没有，则针对html元素，脱离文档流
定位口诀：子绝父相
固定定位、相对定位、绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
body{height: 10000px;}
div{width: 100px;height: 100px;}
#guDing{background: lightblue;position: fixed;left: 500px;top: 200px;}
#xiangDui{background: lightcoral;position: relative;left: 100px;top: 100px;}
#jueDui{background: lightgreen;position: absolute;left: 100px;top: 100px;}
</style>
</head>
<body>
<div id="guDing"></div>
<div id="xiangDui"></div>
<div id="jueDui"></div>
</body>
</html>
定位的扩展
绝对定位的盒子居中
注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。
在使用绝对定位时要想实现水平居中，可以按照下图的方法：
- left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
- margin-left: -100px;：让盒子向左移动自身宽度的一半。
堆叠顺序（z-index）
在使用定位布局时，可能会出现盒子重叠的情况。
加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。
应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示：
z-index 的特性如下：
- 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
- 如果属性值相同，则按照书写顺序，后来居上；
- 数字后面不能加单位。
注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
定位改变display属性
display是显示模式， 可以改变显示模式有以下方式:
- 可以用inline-block 转换为行内块
- 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
- 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
同时注意：
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）
也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。
网页布局总结
一个完整的网页，有标准流 、 浮动 、 定位 一起完成布局的。每个都有自己的专门用法。
标准流
可以让盒子上下排列 或者 左右排列的
浮动
可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列
定位
定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。
浮动（float）
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止（浮动能不用则不用，除非要去除空隙）
文档流
文档流指的是HTML中元素在计算布局排版的过程中,所有处于文档流中的元素会自动的从左到右(非块级元素),从上到下(块级元素)的排列规则。
浙公网安备 33010602011771号