8-2 定位拓展

因为使用绝对定位，会完全脱离普通流，使margin  左右auto的方法不能让盒子水平居中。

所以需要别的方法。那么？

19.1 在使用绝对定位时要想实现水平居中，可以使用的方法。（垂直居中改改属性就行）

  left: 50%;　　让盒子的左侧移动到父级元素的水平中心位置；

  margin-left: -100px; 　　让盒子向左移动自身宽度的一半。

 

 

 

 

 

 

在使用定位布局时，可能会出现盒子重叠的情况。

加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子。

长江后浪堆前浪，应用z-index层叠等级属性可以调整盒子的堆叠顺序。那么？

19.2 z-index  值

　　属性值：正整数、0，也可以负整数。默认值是0，数值越大，盒子越靠上。

• • 如果属性值相同，则按照书写顺序，后来居上。
  • 数字后面不能加单位。　　 　　　　
  • 只能应用于相对定位、绝对定位和固定定位的元素，其他普通流、浮动和静态定位无效。

 

19.3 定位改变display属性

前面说过，display 是 显示模式，可以改变显示模式有以下方式：

1. 可以用inline-block 转换为行内块。
2. 可以用浮动 float 默认转换为行内块（类似行内块，并不完全一样，因为浮动是脱标的）。
3. 绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。

所以，总结：一个行内的元素，如果加了浮动、或者固定定位、或者绝对定位，不用转换显示模式，就可以直接给这个元素设置宽度和高度等。

　　　　　　同时，浮动元素、绝对定位、固定定位元素都不会触发外边距合并的问题（很久以前的临时方法是padding border overflow..）

 

 

补充：在实际开发中，定位的盒子，很多情况下需要单写宽度。

　　　因为，定位盒子会使得盒子默认转换为行内块，行内块的大小是由内容撑开的。

　　　这时如果定位盒子里来张图片。你想要水平居中对齐？门都没有。你得老老实实给定位的盒子写宽度。

 

 

补充：一个小技巧