Html 如何使子div成为绝对值？

我正在尝试使搜索表单具有响应性。尝试将

子div设置为绝对值

，以便我可以将其定位到任何我想要的位置。这是，有一个带有

div

#search near

的搜索表单，我想把它放在第二个导航下方和内容之前

---

像这样

您可以使用第n个子项选择器：

例如：

div:nth-child(1) {

    position: absolute;
    /* More CSS here */
}

---

更多信息。

问题在于

位置：绝对

将相对于第一个定位的（非

静态的

）祖先定位元素，在您的情况下是

。右容器

阅读更多关于

因此，首先：

您应该从

右侧容器中删除
位置：relative

从

#搜索

在

#页面内容

中添加一个

填充顶部：320px

，使

#搜索靠近某个地方

所有这些修改应在屏幕大小<[您定义的内容]时激活

结果:

编辑： 如果页面上有幻灯片框下的

#

：

然后定位的元素应该是

.home content

。例如，添加

position:relative

（如果它还没有定位）。路径上的元素直到

#search near

应该具有默认（

静态

）定位

.home content

应接收填充

仍然很重要（与第一种情况一样）：

#search near

应定位为

绝对

，顶部为0

结果:

---

提供您想要的屏幕截图。检查我刚刚意识到我在上做了修改，它不包含幻灯片下的

#框

我似乎很难为所有页面设置帖子，只有主页起作用：（是的，这绝对不是一个通用的答案。您应该分析所需的行为，并相应地调整元素的层次结构，以便定位它们将符合您的需要。或者您可以始终使用更丑陋的解决方案，只需为每个页面类型包含不同的样式即可。