230问答网 > css 为什么我给li加了position:absolute 他们重叠在一起了

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

2025-02-16 01:48:00

推荐回答（5个）

回答1：

因为加了这个属性之后，元素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多少层结构，都将会被拖出以为父级（参考级）进行绝对定位。

扩展资料：

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

1、对文档流的影响

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

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

2、定位原理

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

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

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

回答2：

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

【position：absolute 】用法：

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

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

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

扩展资料：

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

1、对文档流的影响

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

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

2、定位原理

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

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

参考资料来源：

百度百科-position

回答3：

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

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

回答4：

position：absolute是绝对定位，你将四个li都绝对定位了，而且又没给每一个li设置相应的定位位置，所以就默认就是重叠在一个位置

回答5：

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

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

最新问答

从25匹马中选出最快的3匹，每场比赛只能有5匹马同时进行比赛，最少要举行多少场比赛

FLASH中如何设置TextArea组件中的文字大小?

买全程火车票可以中途再上车吗？座位还保留吧！

热带雨林气候的分布规律

武汉火车站,西进站口和东进站口有区别吗

示波器测量交流电压和直流电压在操作上有什么不同?