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
因为加了这个属性之后，元素li就变成了绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。因此，四个li都定位到了左上角，就产生了重叠的现象。
请注意，在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值,才不会重叠一起!!!!)
