css 与绝对定位相关的属性

朱雀 2021-05-12 11:50 520阅读 0赞

1、Left、right、top、bottom后跟数字+html单位，这四个[CSS][]属性样式用于定位对象盒子，必须定义[position][]属性值为[absolute][position]或者[relative][position]此取值方可生效。

通常单独使用left、right、top、bottom均无效，需要在使用绝对定位[CSS position][position]样式才能生效。

一般left和right在一个样式是只能使用其一，不能left和right都设置，要么使用left就不使用right，要么使用right就不使用left，如果left和right均使用将会出现兼容问题，一个对象设置了靠左left多少距离，自然右边距离自然就有了所以无需设置左边。

相同道理，top和bottom对一个对象只能使用其一，不然会出现逻辑兼容问题。譬如一个人让你往左走，一个人让你往右走，同时发出往左往右走这个时候你也不好判断往那边走。

2、[DIV][CSS]层、[span][]层等[html标签][html]层重叠顺序样式z-index，平时我们使用较少，但也会难免会碰到[**CSS**][CSS] z-index使用。接下来[divcss5][CSS]介绍z-index从基本属性到设置对象的层叠顺序、重叠顺序，从基础语法到应用案例教程讲解学习z-index。

Z-index在使用[绝对定位][position] [position:absolute][position]属性条件下使用才能使用。通常我们让不同的对象盒子以不同顺序重叠排列，我们就是要z-index样式属性。

了方便观察z-index样式属性，我们设置3个DIV盒子，分别设置不同[css背景][css]颜色，设置相同[CSS高度][CSS 1]、[CSS宽度][CSS 2]。分别设置[背景颜色][Link 1]为黑色、红色、蓝色。[CSS width][CSS 2]为100[px][]，[css height][CSS 1]为50px

**1、案例[css代码][css 1]**

/* www.divcs5.com z-index实例 */ 
       .divcss5{position:relative;} 
       .divcss5-1,.divcss5-2,.divcss5-3 
       {width:100px;height:50px;position:absolute;} 
       .divcss5-1{z-index:10;background:#000;left:10px;top:10px} 
       .divcss5-2{z-index:20;background:#F00;left:20px;top:20px} 
       .divcss5-3{z-index:15;background:#00F;left:30px;top:30px}

**2、[html代码][html 1]片段**

<div class="divcss5-1"></div> 
       <div class="divcss5-2"></div> 
       <div class="divcss5-3"></div>

**3、z-index案例截图**

![div css z-index重叠顺序案例截图][div css z-index]  
Z-index样式实践实例案例

**案例说明：**  
三个盒子均都使用了绝对定位属性[position][]:absolute样式，并且设置相同的高度和宽度样式。为了便于观察我们使用left、right属性并赋予不同值，让其错落有致。

Divcss5-1盒子背景为黑色，z-index:10  
Divcss5-2盒子背景为红色，z-index:20  
Divcss5-3盒子背景为蓝色，z-index:15

为可以看见第一个盒子z-index:10，所以重叠在最下层，而第二个盒子z-index:20，值最大所以最上层重叠，第三个盒子设置z-index:15，居中。

总结：我们使用z-index重叠顺序样式，在实际[DIV+CSS][CSS]布局时候我们需要绝对定位样式，并且可以使用left、right进行定位，通过不同z-index值实现层重叠顺序排列。

[CSS]: http://www.divcss5.com/
[position]: http://www.divcss5.com/rumen/r403.shtml
[span]: http://www.divcss5.com/html/h381.shtml
[html]: http://www.divcss5.com/html/h323.shtml
[css]: http://www.divcss5.com/rumen/r125.shtml
[CSS 1]: http://www.divcss5.com/rumen/r123.shtml
[CSS 2]: http://www.divcss5.com/rumen/r119.shtml
[Link 1]: http://www.divcss5.com/jiqiao/j369.shtml
[px]: http://www.divcss5.com/html/h89.shtml
[css 1]: http://www.divcss5.com/rumen/r95.shtml
[html 1]: http://www.divcss5.com/html/h393.shtml
[div css z-index]: /images/20210511/62bd896a15344c0b833b42cbb2789d4c.png