css 为什么我给li加了position:absolute 他们重叠在一起了

发布网友发布时间：2022-04-23 07:54

共5个回答

热心网友时间：2022-05-01 21:20

因为加了这个属性之后，元素li就变成了绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。因此，四个li都定位到了左上角，就产生了重叠的现象。

注意，定位会覆盖掉css代码中的：float:left;让其失效。

【position：absolute 】用法：

将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框。

不要忘记使用left、right、top、bottom的配合定位具体位置。绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。

扩展资料：

【position:relative】和【position：absolute 】的差异。

1、对文档流的影响

relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局。

absolute：元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位。

2、定位原理

absolute：在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位（即html元素）（是父元素没有）。

relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）

参考资料来源：百度百科--position

热心网友时间：2022-05-01 22:38

请注意，在CSS代码中，定位将覆盖：float:left; 并使其无效。

【position：absolute 】用法：

1、将对象拖出文档流，并使用left、right、top、bottom和其他属性进行绝对定位。级联由css z-index属性定义。该对象没有边距，但仍具有补白和边框。

2、可以使用左，右，上，下来协调特定位置。绝对定位如果父级不使用“position:relative”，而是直接使用“position:absolute”进行绝对定位，则body标签将用作父级。

3、无论DIV结构的多少层，使用“position:absolute”定义的对象都会被拖出，使用<body>作为父级（参考级）进行绝对定位。

扩展资料：

“position:absolute”和“position:relative”的差异：

1、对文档流的影响

（1）relative：相对于原始位置移动，设置此属性后该元素仍在文档流中，不影响其他元素的布局。

（2）absolute：元素将离开文档流。如果设置了偏移量，将影响其他元素的位置。

2、定位原理

（1）absolute：在未将父元素设置为相对定位或绝对定位的情况下，该元素相对于根元素定位（即html元素）（是父元素没有）。

（2）relative：相对于其自身位置的定位（设置偏移量时，它将偏离其自身位置）。

参考资料来源：

百度百科-position

热心网友时间：2022-05-02 00:12

absolute :　将对象从文档流中拖出，使用 left ， right ， top ， bottom
等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。
如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义

absolute:表示绝对定位。你所有的li都是给一样的宽高，所有的样式都是一样的，所以就会重叠起来啊，你只看得到4.其实它们都重叠在一起了。

热心网友时间：2022-05-02 02:04

position：absolute是绝对定位，你将四个li都绝对定位了，而且又没给每一个li设置相应的定位位置，所以就默认就是重叠在一个位置追问position: absolute;
bottom:0px;
left:10px;
我代码加了这个但是还是叠在一起的

追答都说了你这样加就是给所有的li给了一个样式，不重叠才怪；
你加了下面的也是讲所有的li放到底部距离左边10px的位置；
既然想到给li绝对定位，为什么不给ol绝对定位到下面，li取消绝对定位，直接float就行了

热心网友时间：2022-05-02 04:12

加上position:absolute
元素就变成绝对定位的了，它的位置是相对于position:relative; 第一个父元素进行定位,没有的话就相对于根元素html了
绝对定位的元素的位置通过 "left", "top", "right" 以及 "bottom" 属性设置
比如:

left:100px;
top:150px;
(绝对定位的元素就脱离文档流了, 要分别为每一个元素设置top,left值,才不会重叠一起!!!!)