专栏首页前端之攻略css position:static 的使用

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 搜索框自适应大小 原

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

    tianyawhl
  • Vue.js -表单控件绑定 原

    基础用法 你可以用v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素,但v-model本质上不过是语法糖,它负责...

    tianyawhl
  • 水平滚动条

    主要用到并排Div 的父级设置white-space: nowrap,并排的div设置display:inline-block;

    tianyawhl
  • jDate移动端用法

    前面写过选择年月日的方法,其实也可以用在移动端,样式也还算可以,用法与pc端类似;

    祈澈菇凉
  • 搜索框自适应大小 原

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

    tianyawhl
  • golang goquery selector(选择器) 示例大全

    最近研究Go爬虫相关的知识,使用到goquery这个库比较多,尤其是对爬取到的HTML进行选择和查找匹配的内容时,goquery的选择器使用尤其多,而且还有很多...

    飞雪无情
  • ACCESS数据库基本使用

    用户1112962
  • JQuery选择器(中)

    HTML5学堂:在学习JQuery开发的时候,选择器有多种,而我们将接着介绍选择器的其他类型,希望对大家有帮助! 5.临近选择器: $("mix+mix"),选...

    HTML5学堂
  • Vue中$refs的理解

    $refs是一个对象,持有注册过ref attribute的所有DOM元素和组件实例。

    WindrunnerMax
  • 前端测试题:关于WEB中常用的度量单位,表述错误的是?

    元素的width/height/padding/margin用em的话是相对于该元素的font-size

    舒克

扫码关注云+社区

领取腾讯云代金券