Question

怎么让position:absolute的元素不继承父容器的width,而是width自适应

Answer 1

用Div CSS进行网站布局时，做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。
Position属性有四个值：static、fixed、absolute和relative，

后面两个在布局中的定位里是经常用到的，顾名思义，

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

ralative是指相对定位，就是依据left，right，top，bottom等属性在正常文档流中偏移位置。

但是，怎么个绝对法，又怎么个相对法呢？

以前我一直没有仔细去研究它，到具体应用时有时会有点迷糊，我相信很多朋友也会有这样的问题。今天我特意测试了一下，得出了以下结论：

1、当Position属性值为Relative时对象原来占有的位置保留，其后面的对象按原来文档流仍然保持原来的位置Top的值表示对象相对原位置向下偏移的距离bottom的值表示对象相对原位置向上偏移的距离两者同时存在时，只有Top起作用。left的值表示对象相对原位置向右偏移的距离right的值表示对象相对原位置向左偏移的距离两者同时存在时，只有left起作用。

2、当Position属性值为absolute时对象从文档流中抽取出来，原占有的位置被后面的对象顶替上来Top的值表示对象上边框与浏览器窗口顶部的距离bottom的值表示对象下边框与浏览器窗口底部的距离两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂直保持位置不变。left的值表示对象左边框与浏览器窗口左边的距离right的值表示对象右边框与浏览器窗口右边的距离两者同时存在时，只有left起作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。

在Position属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。

Answer 2

吧，毕竟css里的文章太少了。哈哈。。。
定义了元素的position:absolute属性后想让元素
居中就不是那么容易了。如果设置
position:relative后用margin:0 auto可以让元素居
中。但是在实际应用的时候，元素多了就互相干
扰了。可以用js这样简单实现，且支持ie6 (8.0不
知道，但估计没问题)，ff,safari,opera9.0，方法一：使用js（但是发现在IE6上会报错）；方法二：使用JQuery,几大浏览器测试皆通过。
////////////////////////////////Javascript
window.onload = aa;
window.onresize = aa;
function aa() {
var getE = document.getElementByIdx_x_x
('helpPannel');
var getBody = document.getElementByIdx_x_x('body');getE.style.left = (getBody.clientWidth -
getE.offsetWidth)/2+"px";}////////////////////////////////////CSS
*{margin:0; padding:0;}
.box{width:500px; height:500px; background-
color:silver; position:absolute; border:10px solid
black; padding:20px;}/////////////////////////////JQuery方法

Answer 3

加一个固定宽度，没有高度的容器,给容器加定位，原来需要定位的元素就别定位了，而是加上display: inline-block/inline；行内元素自适应，你们懂得...

Answer 4

width: max-content;

Answer 5

直接在子元素设置float: left;就行了，不会继承父元素，可以自适应