relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置经过top,bottom,left,right定位,而且能够经过z-index进行层次分级app
absolute(绝对定位) 脱离文档流,经过top,bottom,left,right定位。选取其最近一个最有定位设置的父级对象进行绝对定位,若是对象的父级没有设置定位属性,
absolute元素将以body坐标原点进行定位,能够经过z-index进行层次分级。 .net
fixed(固定定位) 这里所固定的参照对像是可视窗口而并不是是body或是父级元素。可经过z-index进行层次分级。orm
static:无特殊定位,对象遵循正常文档流对象
Adiv是放在Bdiv上面的,而且屏幕小的时候各个文本框就单独占一行以下:文档
这时须要用到position :relatic实现,get
<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>input
/*自适应搜索*/
.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;}
}itposition:absolute 所在div外面的div也没有必要定义position:relative,此里面的div 可使用margin来定位,当屏幕小的时候回归正常文档流position:staticio