css 绝对定位

小灰灰 2021-05-12 11:50 534阅读 0赞

position的四个属性值：

1.  relative
2.  absolute
3.  fixed
4.  static

下面分别讲述这四个属性。

1. relative  
relative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中，sub1和sub2是同级关系，如果设定sub1一个relative属性，比如设置如下CSS代码：

\#sub1  
\{  
    position: relative;  
    padding: 5px;  
    top: 5px;  
    left: 5px;  
\}

我们可以这样理解，如果不设置relative属性，sub1的位置按照正常的文档流，它应该处于某个位置。但当设置sub1为的position为relative后，将根据top，right，bottom，left的值按照它理应所在的位置进行偏移，relative的“相对的”意思也正体现于此。  
对于此，您只需要记住，sub1如果不设置relative时它应该在哪里，一旦设置后就按照它理应在的位置进行偏移。  
随后的问题是，sub2的位置又在哪里呢？答案是它原来在哪里，现在就在哪里，它的位置不会因为sub1增加了position的属性而发生改变。  
如果此时把sub2的position也设置为relative，会发生什么现象？此时依然和sub1一样，按照它原来应有的位置进行偏移。  
注意relative的偏移是基于对象的margin的左上侧的。  
  
2. absolute  
这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是fixed属性的特点。当sub1的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：  
（1）当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时sub1按照这个parent来进行定位。  
注意，对象虽然确定好了，但有些细节需要您的注意，那就是我们到底以parent的哪个定位点来进行定位呢？如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。接下来的问题是，sub2的位置到哪里去了呢？由于当position设置为absolute后，会导致sub1溢出正常的文档流，就像它不属于 parent一样，它漂浮了起来，在DreamWeaver中把它称为“层”，其实意思是一样的。此时sub2将获得sub1的位置，它的文档流不再基于 sub1，而是直接从parent开始。

（2）如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解。  
  
3. fixed  
fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。  
  
4. static  
position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。

二、position实际用处：

绝对定位position用于定位盒子对象，有时一个布局中几个小对象，不易用css padding、[css margin][]进行相对定位，这个时候我们就可以使用绝对定位来轻松搞定。特别是一个盒子里几个小盒子不规律的布局，这个时候我们使用position绝对定位非常方便布局对象。

![position绝对定位示范图][position]

绝对定位position示范适用图、不规律布局，为即可利用position:absolute；position:relative进行绝对定位

绝对定位与[float浮动][float]不能同时使用，比如一个大盒子里有的是绝对定位，有的是使用[css float][float]浮动定位，这样IE6浏览器将不会显示改大对象里的这些绝对定位与相对定位，这也算是IE6 [CSS HACK][]吧，注意不要混用即可。

三、position使用条件

**position:absolute**；**position:relative**绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。

.divcss5\{position:relative\} 定义，通常最好再定义[CSS宽度][CSS]和[CSS高度][CSS 1]  
.divcss5-a\{position:absolute;left:10px;top:10px\} 这里定义了距离父级左侧距离间距为10px，距离父级上边距离为10px  
或  
.divcss5-a\{position:absolute;right:10px;bottom:10px\} 这里定义了距离父级靠右距离10px,距离父级靠下边距离为10px

**对应HTML结构**  
<div class="divcss5">  
    <div class="divcss5-a"></div>  
</div>

这样就绝对定位了“divcss5-a”在父级“divcss5”盒子内。

注意的是，left（左）和right（右）在一个对象只能选一种定义，bottom（下）和top（上）也是在一个对象只能选一种定义。

四、实例

这里DIVCSS5为大家实例应用position绝对定位，我们设置一个最外层盒子[css边框][css]为红色，[css width][CSS]为400px,[css height][CSS 1]为200px,内部包含了2个盒子，为就用绝对定位这2个盒子，第一个盒子[CSS命名][CSS 2]为“divcss5-a”,其宽度为100px,[背景颜色][Link 1]为黑色，高度为100px,定位距离父级上为10px，距离左为10px;第二个盒子[CSS类命名][CSS 2]为“divcss5-b”，其宽度和高度分别为50px,[css背景][css 1]颜色为蓝色，距离父级下距离为13px,距离父级右边为15px。

**1、css代码如下**

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

<div class="divcss5"> 
           <div class="divcss5-a"></div> 
           <div class="divcss5-b"></div> 
       </div>

![CSS position absolute relative绝对定位应用案例截图][CSS position absolute relative]

总结：

通常我们使用position:absolute；position:relative进行绝对定位布局，通过[CSS][CSS 3]进行定义定位，[DIV][CSS 3]布局HTML，注意什么地方使用position:relative，什么地方使用position:absolute进行定位，同时不要忘记使用left、right、top、bottom的配合定位具体位置。绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以[body标签][body]为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以[<body>][body]为父级（参考级）进行绝对定位。绝对定位非常好用，但切记不要滥用，什么地方都用，这样有时会懒得计算距离上、下、左、右[间距][Link 2]，同时可能会造成[CSS代码][CSS 4]臃肿，更加经验适当使用，用于该使用地方。

在绝对定位时候我们可以使用[css z-index][]定义[css层重叠顺序][css z-index]。

[css margin]: http://www.divcss5.com/rumen/r128.shtml
[position]: /images/20210511/d974a51728734ffbaadceae20c4c5abd.png
[float]: http://www.divcss5.com/rumen/r93.shtml
[CSS HACK]: http://www.divcss5.com/css-hack/
[CSS]: http://www.divcss5.com/rumen/r119.shtml
[CSS 1]: http://www.divcss5.com/rumen/r123.shtml
[css]: http://www.divcss5.com/rumen/r120.shtml
[CSS 2]: http://www.divcss5.com/jiqiao/j4.shtml
[Link 1]: http://www.divcss5.com/jiqiao/j369.shtml
[css 1]: http://www.divcss5.com/rumen/r125.shtml
[html]: http://www.divcss5.com/html/h393.shtml
[CSS position absolute relative]: /images/20210511/09afed84cc094cab820624a7405a1c67.png
[CSS 3]: http://www.divcss5.com/
[body]: http://www.divcss5.com/html/h356.shtml
[Link 2]: http://www.divcss5.com/rumen/r75.shtml
[CSS 4]: http://www.divcss5.com/rumen/r95.shtml
[css z-index]: http://www.divcss5.com/rumen/r402.shtml