css position：static 的使用

relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过top,bottom,left,right定位，并且可以通过z-index进行层次分级

absolute(绝对定位) 脱离文档流，通过top,bottom,left,right定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性， absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。    

fixed（固定定位） 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

static:无特殊定位,对象遵循正常文档流

Adiv是放在Bdiv上面的，并且屏幕小的时候各个文本框就单独占一行如下：

这时需要用到position ：relatic实现，

 <div class="row searchRow" style="">        <div class="col-lg-4 margin_b20" style="">               <div class="floatLeft zhangdan-time-title ">开始时间：</div>               <div class="zhangdan-time" style=""><input type="text" value="" class="form-control" id="appDate1" ></div>        </div>        <div class="col-lg-4 margin_b10" style="">               <div class="floatLeft zhangdan-time-title ">结束时间：</div>               <div class="zhangdan-time" style=""><input type="text" value="" class="form-control" id="appDate2" ></div>        </div>        <div class="col-lg-2 margin_b10">              <button class="btn btn-primary" ><i class="fa fa-search"></i>查询</button>             </div>         </div>

/*自适应搜索*/ .floatLeft {float: left;} .zhangdan-time-title{height:34px;line-height:34px;} .zhangdan-time{margin-left:80px;} .searchRow{position:absolute;z-index:999;width:900px;margin-top:10px;} @media (max-width: 1200px){ .searchRow{position:static;width:100%;margin-left:0;margin-right:0;} .searchRow>div{padding-left:0;padding-right:0;} } position:absolute 所在div外面的div也没有必要定义position：relative,此里面的div 可以使用margin来定位，当屏幕小的时候回归正常文档流position:static

(adsbygoogle = window.adsbygoogle || []).push({});