css3之定位布局

定位布局

css3浮动布局见：
https://blog.csdn.net/Arcofcosmos/article/details/122625489?spm=1001.2014.3001.5502
浮动通常是多个块级元素一行无缝隙横向排列，常用于横向排列盒子。

定位是盒子自由地在某个盒子内移动或者固定到屏幕某个位置，且可以压住其它盒子。

定位 = 定位模式 + 边偏移

定位模式是指定一个元素在文档中的定位方式，边偏移决定了该元素的最终位置。

position: relative			//相对定位模式
top: 10px;					//距离上边缘10px
left: 10px;					//距离左边缘10px

定位模式

采用position属性设置。

position: static | relative | absolute | fixed

static         //静态定位，默认定位方式，也即无定位，无边偏移
relative 	   //相对定位，移动位置时是相对自身位置的
absolute 	   //绝对定位，可以压住其它盒子
fixed 		   //固定定位，固定为屏幕某个位置
sticky		   //粘性定位

相对定位

1. 相对定位时元素原始位置依然占有，后面盒子依然保留原始位置，不脱标。

2. 相对定位移动时边偏移相对于原始位置，以盒子左上角的横纵坐标为起点。

绝对定位

1. 绝对定位移动位置时，是相对于其祖先元素来说。
2. 若元素无祖先元素或者祖先元素无定位时，则以浏览器整个文档盒子为准定位。
3. 若祖先元素有定位（相对，绝对，固定），则以最近一级有定位祖先元素为参考点移动位置，一级一级往上找有定位的祖先元素。
4. 元素使用绝对定位之后就会不占有原先位置，相当于浮动起来。

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin: 0 auto的方式水平居中。

position: absolute;
left: 50%;				//先到整个页面的一半位置
margin-left: 自身宽度一半的负值;			//往左再移动自身宽度的一半距离

注意

一般来说子元素使用绝对定位的话，父元素就要使用相对定位。

1. 子元素使用绝对定位，不会占有位置，可以放在父盒子中的任意一个地方，不会影响兄弟盒子。
2. 父盒子要使用定位限制子元素在父盒子中显示。
3. 父盒子布局需要占有位置，因此父盒子应该使用相对定位。

固定定位

固定定位后的元素固定在浏览器可视区的位置。一般用于浏览器滚动时元素位置不变。

1. 固定定位后的元素移动参照点是浏览器可视页面，即当前能看到的整个页面，不包括页面以外的网页。
2. 固定定位后与父元素没有关系，不随滚动条滚动而滚动。
3. 固定定位后不再占有原先位置。

固定定位小技巧

元素固定到版心右侧位置。

1. 让固定定位的盒子left: 50%;让其走到浏览器可视区的一半位置。
2. 让固定定位的盒子margin-left:版心宽度一半的距离。使盒子再往右移动版心一半的距离。
3. 然后固定定位的盒子就可以贴着版心右侧对齐。

粘性定位

粘性定位相当于相对定位与固定定位的混合。随页面滚动搭配使用，滚动条移动粘性定位元素到其偏移位置后粘性定位元素就会固定不再随滚动条移动而移动。

粘性定位兼容性较差，IE不支持。

position: sticky;
top: 10px;

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
2. 粘性定位占有原先的位置（相对定位的特点）
3. 必须添加top,left,right,bottom其中一个才有效

边偏移

边偏移是定位的盒子移动到的最终位置，有top,bottom,left,right四个属性。

top: 80px;			//顶端偏移量，定义元素相对于其父元素上边线的距离
bottom: 80px;		//底部偏移量，定义元素相对于其父元素下边线的距离
left: 80px;			//左侧偏移量，定义元素相对于其父元素左边线的距离
right: 80px;		//右侧偏移量，定义元素相对于其父元素右边线的距离

注意相对定位方式时，边偏移就不是相对父元素了，是相对自身原来的位置。

添加边偏移属性时一般只会加其中两个，例如只写top,left是相对于左上角偏移，top,right是相对于右上角偏移。

如果一个盒子既有left属性又有right属性，则默认执行left属性。同理，top属性与bottom属性会优先执行top属性。

定位叠放次序

使用定位布局时，可能出现盒子重叠的情况，此时可以使用z-index来控制盒子的叠放次序(z轴)。

即相当于控制哪个盒子放在页面最前面，哪个在后面。

z-index: 1;

1. 属性值可以是正整数、负整数或0，默认为auto，数值越大盒子越靠上。
2. 如果属性值相同，则按照书写顺序，后来者居上。
3. 数字后面不能加单位。
4. 只有定位的盒子采用z-index属性。

定位的拓展：

绝对定位和固定定位均与浮动类似

1. 行内元素添加绝对定位或者固定定位，可以直接设置高度与宽度。
2. 块级元素添加绝对定位或者固定定位后，若不设置高度与宽度，则其默认大小为其内容大小。
3. 浮动元素，绝对定位，固定定位的元素都不会引起外边距合并的问题。

绝对定位和固定定位的盒子会完全压住其它盒子

浮动元素只会压住它下面标准流的盒子，但是不会压住其下面标准流盒子里面的文字与图片。

而绝对定位和固定定位的盒子会压住下面标准流中所有内容。

因此可使用浮动来实现文字环绕图片的效果。