如何在html/css中定位搜索栏

这是我目前的代码：

html:

---

如何使搜索栏进一步向下定位，我需要搜索栏定位在标题的中间而不是顶部。为什么top:25%不起作用？

将

位置：相对

替换为

位置：绝对

：

html, body {
    height:100%;
    min-height:100%;
    width:100% min-width:100%;
}
.header {
    margin-bottom:0;
    height:10%;
    width:100%;
    background-color:#343430;
}
.search_bar input[type="text"] {
    position:absolute;
    left:20%;
    top:25%;
    width:30%;
    background-color:white;
    color:grey;
}

如果查看相对定位的定义：

The element is positioned relative to its normal position,
so "left:20" adds 20 pixels to the element's LEFT position

你的搜索栏确实定位了自己

---

[[1]：[2]：相对和绝对之间有什么区别。它可以工作，但我只是想知道。@user3247608 Read absolute:元素相对于其第一个定位（非静态）的祖先元素定位。相对：元素相对于其正常位置定位，所以“左：20”在元素的左侧位置添加20个像素。PS：你应该将答案标记为“正确”。对不起，你说的祖先元素是什么意思？我想我勾选了将答案标记为“正确”的图标correct@user3247608祖先元素是它所在的元素（父元素），这里有一个更好的定义：不要为元素留空间。相反，将其放置在相对于其最近定位的祖先或包含块的指定位置。绝对定位的框可以有边距，它们不会与任何其他边距一起折叠。基本上，它不受其所在元素边界的约束希望这有帮助！这是有道理的，thanx。

html,body{
height:100%;
min-height:100%; 
width:100%
min-width:100%;
}

.header{
margin-bottom:0;
height:10%; 
width:100%;
background-color:#343430;
}

.search_bar input[type="text"]{
position:relative;  
left:20%;
top:25%;
width:30%;

background-color:white; 
color:grey;
}

html, body {
    height:100%;
    min-height:100%;
    width:100% min-width:100%;
}
.header {
    margin-bottom:0;
    height:10%;
    width:100%;
    background-color:#343430;
}
.search_bar input[type="text"] {
    position:absolute;
    left:20%;
    top:25%;
    width:30%;
    background-color:white;
    color:grey;
}

The element is positioned relative to its normal position,
so "left:20" adds 20 pixels to the element's LEFT position