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({});