如何设置CSS容器的绝对定位？使用position:absolute脱离文档流定位

上周，有客户问我，CSS中的绝对定位到底是什么？我向他解释了一下，觉得很有趣，所以想和他谈谈。

首先，绝对定位（position:absolute）允许元素脱离正常的文档流，找到自己的位置，而不占用其他元素的空间。
例如，如果您有一个子元素并且希望将其与常规布局流分开，则可以向其添加position:absolute。

然后你必须找到它的参考资料。
该引用是最近的非静态祖先元素。
例如，如果你的子元素是.child，那么你必须在其父元素.parent上设置position:relative，这样.child就可以相对于.parent定位。

接下来，您可以使用 top、right、bottom 和 left 属性来控制 .child 的确切位置。
例如，如果您希望 .child 相对于 .parent 的左上角偏移 2 0px 和 3 0px，您可以这样写：
.child { 顶部：2 0 像素； 左：3 0 像素；
这是一个例子：
这是主要容器。
我是绝对定位的子元素。
<风格> .父级{ 位置：相对； 宽度：3 00px； 高度：2 00px； 边框：2 px深蓝色； } .孩子{ 位置：绝对； 顶部：2 0 像素； 左：3 0 像素； 背景颜色：浅珊瑚色； } </风格>
当然，使用绝对定位时也会遇到一些问题。
例如，如果根元素没有非静态位置，则该元素可能相对于 <body> 定位，这可能会导致未对齐。
解决方案是检查并添加position:相对于目标元素最近的父元素。

另外，如果使用固定像素值进行定位，可能会导致元素在小屏幕上溢出。
此时，您可以考虑使用百分比或视口单位进行优化。

出于布局影响和考虑，绝对定位的元素不会占用文档流空间，并且大小将缩小并包裹内容。
如果不设置宽度或高度，元素的大小将由内容决定。
此外，绝对定位的元素将进入新的堆叠上下文，您可以通过 z-index 控制其级别。

最后，虽然绝对定位很强大，但要注意不要过度使用它。
对于常规布局我仍然建议使用 Flexbox 或 Grid，它们更灵活且更易于维护。

无论如何，这取决于你。
这种绝对定位是一件非常有趣的事情。
如果使用得当，你可以创造出许多有趣的构图效果。
我还在思考这个问题，如何让绝对定位的元素看起来不那么突兀，同时仍然保持响应能力。

Flex布局中子元素绝对定位并相对父元素定位的策略

上周看到了这个绝对的Flex布局定位方法 2 02 3 年那个项目使用的
内核是父容器加上position:relative 添加position:absolute
到子元素，就像这个例子 .mycontainer{位置：相对} .mycontainer-bar{position:absolute;top:1 0px}
我只是想到了别的东西 Z 索引也非常重要。
例如.mycontainer-bar{z-index:1 0}
注意响应式设计 @media(max-width:6 00px){.mycontainer-bar{top:5 px}}
避免过度使用 优先使用内置 Flexbox 属性
不确定这部分 绝对定位的元素会影响SEO吗
算了 这取决于你

CSS 定位 – 绝对、相对、固定和粘性

相对位置：.box{position:relative;top:2 0px;left:3 0px;}，元素移动但位置不变。
绝对定位：.box{position:absolute;top:5 0px;right:2 0px;}，位于文档流之外。
如果没有定位祖先，它将相对于视口定位。
固定位置：.navbar{position:fixed;top:0;left:0;width:1 00%;}，滚动时固定。
粘性定位：.header{position:sticky;top:0;}，滚动到指定阈值后固定。
z-index: .box1 {z-index:1 ;}.box2 {z-index:2 ;}，控制堆叠顺序。
组合定位：sidebar{position:fixed;width:2 00px;}.content{position:relative;margin-left:2 2 0px;}，侧边栏固定，内容区域相对定位。
实用提醒：先了解定位原理，然后根据具体需求灵活使用。