position top bottom left right height z-index

最新推荐文章于 2025-08-07 11:18:45 发布

原创最新推荐文章于 2025-08-07 11:18:45 发布 · 513 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

22 篇文章

订阅专栏

本文深入讲解CSS中的绝对定位，包括left、right、top、bottom属性的使用方式及注意事项，探讨了position属性的不同值如何影响元素定位，并介绍了z-index属性的作用及其使用条件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.DIV CSS left right top bottom定位
这四个CSS属性样式用于定位对象盒子，必须定义position属性值为absolute或者relative此取值方可生效。

Left 靠左距离多少
Right 靠右边距离多少
Top 距离顶部距离多少
Bottom距离下边距离多少

**使用条件** 通常单独使用left、right、top、bottom均无效，需要在使用绝对定位**CSS position**样式才能生效。一般left和right在一个样式是只能使用其一，top和bottom对一个对象只能使用其一，不然会出现逻辑兼容问题。 **二.DIV CSS position绝对定位absolute relative** > position参数： > > static : 无特殊定位，对象遵循HTML定位规则 > > absolute :将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框 > **注意:绝对定位与float浮动不能同时使用**，比如一个大盒子里有的是绝对定位，有的是使用css float浮动定位，这样IE6浏览器将不会显示改变对象里的这些绝对定位与相对定位，这也算是IE6 CSS HACK。 **绝对定位使用条件** > 通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。

.divcss5{position:relative} 
.divcss5-a{position:absolute;left:10px;top:10px} 
.divcss5-b{position:absolute;right:10px;bottom:10px}

解释：
divcss5 定义，通常最好再定义CSS宽度和CSS高度
.divcss5-a 距离父级左侧距离间距为10px，距离父级上边距离为10px
.divcss5-b 距离父级靠右距离10px,距离父级靠下边距离为10px

对应HTML结构

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

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

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

三.css绝对定位总结
注意什么地方使用position:relative，什么地方使用position:absolute进行定位，同时不要忘记使用left、right、top、bottom的配合定位具体位置。

绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以为父级（参考级）进行绝对定位。

但切记不要滥用，什么地方都用，这样有时会懒得计算距离上、下、左、右间距，同时可能会造成CSS代码臃肿，更加经验适当使用，用于该使用地方。

四.css z-index层重叠顺序
注意：z-index的数值不跟单位。
z-index的数字越高越靠前，并且值必须为整数和正数（正数的整数）。

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