现在我们点击了导航栏上的小图标，可以动态的在 content 元素上面添加或者去掉一个名字是 searching 的 css 类 ..

利用这个特性，我们可以动态的显示或者隐藏一些元素 ..

导航栏在正常状态下，这个搜索框是隐藏起来的 ..

找开 navbar 样式 ... 添加一个选择器 .. 在搜索表单元素的上面，有一个 .search-form 类 ..

先设置一下它的位置 .. 用的是 position ，把它的值设置成 absolute .. 表示绝对的位置 .. 你会发现添加了这个样式以后，这个搜索框的位置的变化 ..

把元素的 position 属性设置成 absolute ，就好像把元素从它的包装里面卸载掉了 .. 你可以使用一些位置属性去设置它的位置 .. top，bottom，left，right ...

这些位置会相对于一个元素的位置 .. 在这个 content 里面，可以再用一下 position .. 把它的值设置成 relative .. 表示相对 ..

这样它里面包装的这个 search-form 元素，就会相对于这个 content 元素定位 ..

在这个 search-form 上面，再用一个 transform 属性，表示变形 .. 用一下 translateY ，表示 Y 轴移动 .. 给它一个值，设置成 -120px .. 这样这个元素会在 Y 轴向上移动 120 个像素 ..

再添加一个选择器 .. .searching ~ .search-form ，点击搜索图标，会在 content 元素上添加一个 searching 类 .. 这个波浪号表示的是元素的兄弟关系 ..

意思就是，找到 .searching 元素的兄弟，.search-form ..

用一下 transform，translateY .. 移动的距离可以是 -50px ..

点一下搜索小图标 .. 在 content 元素上出现了 searching 类以后，这个搜索框又会出现在导航栏的上面 ..

显示搜索框的时候，可以把导航栏上的标志还有菜单隐藏起来 .. 再去添加点样式 ..

.searching .header, & .searching .menu {
transform: translateY(80px);
}

这里的 & 符号，这是 sass 里面的东西，它引用的就是上面的 .ui.navbar ，也就是在这里，这个 & 符号会被替换成 .ui.navbar ..

这个选择器的意思就是，找到搜索状态下的导航栏里的 header 还有 menu .. 让它们向下移动 80 个像素 ..

点一下搜索小图标，显示搜索框，标志还有菜单向下移动了 80 个像素 ..

这个标志还有菜单还会显示在这里，在它们的包装元素上面，可以用一下 overflow 属性，值设置成 hidden ，这样溢出包装的元素会被隐藏起来。