Html 可扩展搜索表单

我正在进行可扩展搜索，但面临一个问题。当我点击搜索栏时，搜索栏正在扩展。但右侧内容正在向下移动。我想隐藏右侧内容时，搜索栏是扩大类似stackoverflow搜索栏

正文{
保证金：0；
填充：0；
}
.main标题{
宽度：100%；
背景色：#FAFB；
边框顶部：3px实心#F48024；
浮动：左；
垫底：10px；
-莫兹盒阴影：3px 3px 5px 1px#ccc；
-网络工具包盒阴影：3px 3px 5px 1px#ccc；
盒影：3px 3px 5px 1px#ccc；
}
.innerheader{
宽度：1000px；
保证金：自动；
}
.logo_name{
显示：内联块；
边缘顶端：13px；
线高：1米；
字体系列：helvetica、arial、无衬线字体；
字体大小：粗体；
背景：线性梯度（向右，#7db9e8 50%，#1e5799 50%）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
字体大小：22px；
}
加乌阿先生{
浮动：左；
}
加乌布先生{
浮动：左；
填充物：5px；
垫底：10px；
边缘顶部：5px；
}
ga_b ul先生{
边际：0px；
填充：0px；
左边距：7px；
线高：1；
}
.ga_b ul>li{
显示：内联块；
左边距：5px；
填充物：5px；
}
.ga_b ul>li a{
文字装饰：无；
颜色：黑色；
字体大小：15px；
字体系列：“Lucida Grande”，Arial，Helvetica，Verdana，无衬线；
}
.ga_b ul>li:悬停{
背景色：#ECECEC；
}
加乌奇先生{
浮动：左；
}
.ga_c输入{
大纲：无；
}
.ga_c输入[类型=搜索]{
-webkit外观：textfield；
-webkit框大小：内容框；
字体家族：继承；
字体大小：100%；
左边距：10px；
}
.ga_c输入：：-webkit搜索装饰，
.ga_c输入：-webkit搜索取消按钮{
显示：无；
}
.ga_c输入[类型=搜索]{
背景：#ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png)无重复9px中心；
边框：实心1px#ffffff；
填充：9px 10px 9px 32px；
宽度：175px；
边界半径：5px；
边缘顶部：5px；
-webkit过渡：全部5秒；
-moz转换：全部为0.5s；
过渡：全部5秒；
}
.ga_c输入[类型=搜索]：焦点{
宽度：400px；
背景色：#fff；
-webkit盒阴影：0 0 5px rgba（109207246.5）；
-莫兹盒阴影：0 0 5pxRGBA（109207246.5）；
盒影：0 0 5px rgba（109207246.5）；
}
.ga_c输入：-moz占位符{
颜色：#999；
}
.ga_c输入：：-webkit输入占位符{
颜色：#999；
}
加乌德先生{
浮动：左；
}
.ga_d ul>li{
显示：内联块；
显示：固定；
}

登录
登记册

对于您的结构，仅使用css是不可能的。然而，如果改变结构，你可以有这样的东西

*{
框大小：边框框；
字体系列：arial；
}
输入{
填充：10px；
背景：#eee；
边框：1px实心#ddd；
显示：内联块；
过渡：.3s；
右边距：10px；
宽度：250px；
}
输入：焦点{
宽度：400px；
}
输入：focus+div{
不透明度：0；
可见性：隐藏；
}
保险商实验室{
填充：0；
保证金：0；
}
ulli{
显示：内联；
右边距：5px；
}
div{
显示：内联块；
过渡：.3s；
}

登录
登记册

对于您的结构，仅使用css是不可能的。然而，如果改变结构，你可以有这样的东西

*{
框大小：边框框；
字体系列：arial；
}
输入{
填充：10px；
背景：#eee；
边框：1px实心#ddd；
显示：内联块；
过渡：.3s；
右边距：10px；
宽度：250px；
}
输入：焦点{
宽度：400px；
}
输入：focus+div{
不透明度：0；
可见性：隐藏；
}
保险商实验室{
填充：0；
保证金：0；
}
ulli{
显示：内联；
右边距：5px；
}
div{
显示：内联块；
过渡：.3s；
}

登录
登记册

您可以通过定位：

*{框大小：边框框}/*推荐*/
身体{
保证金：0；
填充：0；
}
.main标题{
宽度：100%；
最小宽度：1000px；/*已添加/需要与.innerheader宽度匹配*/
边距：0自动；/*已添加*/
背景色：#FAFB；
边框顶部：3px实心#F48024；
浮动：左；
垫底：10px；
-莫兹盒阴影：3px 3px 5px 1px#ccc；
-网络工具包盒阴影：3px 3px 5px 1px#ccc；
盒影：3px 3px 5px 1px#ccc；
}
.innerheader{
宽度：1000px；
页边距：0自动；/*已修改*/
}
.logo_name{
显示：内联块；
边缘顶端：13px；
线高：1米；
字体系列：helvetica、arial、无衬线字体；
字体大小：粗体；
背景：线性梯度（向右，#7db9e8 50%，#1e5799 50%）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
字体大小：22px；
}
加乌阿先生{
浮动：左；
}
加乌布先生{
浮动：左；
填充物：5px；
垫底：10px；
边缘顶部：5px；
}
ga_b ul先生{
保证金：0；
填充：0；
左边距：7px；
线高：1；
}
.ga_b ul>li{
显示：内联块；
左边距：5px；
填充物：5px；
}
.ga_b ul>li>a{
文字装饰：无；
颜色：#000；/*黑色*/
字体大小：15px；
字体系列：“Lucida Grande”，Arial，Helvetica，Verdana，无衬线；
}
.ga_b ul>li:悬停{
背景:#ECECEC ;；
}
加乌奇先生{
位置：相对；/*需要设置，因为绝对位置的子项*/
浮动：左；
}
.ga_c输入{
大纲：无；
}
.ga_c输入[类型=搜索]{
位置：绝对；/*需要绝对定位，即从正常文档流中删除，以便可以“覆盖”和其他元素，当然需要设置z索引*/
z-index:9999；/*通常是一些大的东西，以确保它保持在顶部/在所有其他东西之前*/
-webkit外观：textfield；
-webkit框大小：内容框；
字体家族：继承；
字体大小：100%；
左边距：10px；
}
.ga_c输入：：-webkit搜索装饰，
.ga_c输入：-webkit搜索取消