如何让孩子绝对？

Question

我正在努力使搜索表单响应。想要制作一个child div absolute所以我可以将它放在我想要的任何地方。以下是 site ，其中包含div #search-near的搜索表单，我希望将其放在第二个导航下方和内容之前。

喜欢这个

Answer 1

您可以使用nth-child选择器：

<强> E.g：

div:nth-child(1) {

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

更多信息here。

Answer 2

问题在于position: absolute;会将您的元素相对于第一个定位的（非static）祖先定位，这在您的情况.right-container中。

详细了解absolute positioning

首先：

1. 您应该从position: relative。
中删除.right-container
2. 从margin-top: -600px
中删除#search-near
3. 向padding-top: 320px添加#page-content以使#search-near某个地方
4. 所有这些修改应在屏幕上激活＆lt; [无论你定义什么]

结果：



编辑：

如果您在页面上有#under-slideshow-box：

1. 然后定位的元素应该是.home-content。例如。添加position: relative（如果它尚未以某种方式定位）。直到#search-near应该具有默认（static）定位的路径上的元素。
2. .home-content应该收到填充
3. 仍然很重要（如同第一种情况一样）：#search-near应定位absolute top: 0

结果：