Css 技巧，SearchBar 跟随水平 2 色背景

Question

我的 CSS 设计快完成了，但我在实施过程中遇到了一个小问题。

我想做的是：

我希望搜索栏位于我的两种颜色背景之间。问题是当我增加/减少时，我的搜索栏向上或向下移动但没有跟随这条线，我不希望这样。

我想知道是否有作弊行为。现在我会尝试这样做：然后在底部添加第二个 div。这是我目前找到的唯一解决方案。但也许如果有人有更好的线性渐变或类似的方法为什么不呢！

如果你想看，我在这里留下link： jsFiddle:https://jsfiddle.net/yo7pzfda/

Answer 1

尝试为您的输入框使用负边距并将其放在内容的顶部div。这会将它向上移动几个像素到上面 div 并在你调整屏幕大小时保持它在那里。

片段：

body {
  background-color: gray;
  margin: 0;
  padding: 0;
}

input {
  height: 30px;
  width: 300px;
  border-radius: 5px;
  margin-top: -5%;
}

#content {
  background-color: blue;
  padding: 0;
  margin: 0;
  margin-top: 7%;
  min-width: 100vh;
  min-height: 100vh;
  text-align: center;
  font-weight: bold;
  font-family: Arial, sans-serif;
}

<div id="content">
  <input placeholder="Search...">
</div>

Css 技巧，SearchBar 跟随水平 2 色背景

Css Tricks, SearchBar following horizontal 2 colors background

html

css

searchbar