css position：static 的使用

最新推荐文章于 2025-04-16 15:07:35 发布

weixin_33888907

最新推荐文章于 2025-04-16 15:07:35 发布

阅读量619

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/2612473/blog/730570

本文详细解析了CSS中relative、absolute及fixed等定位方式的特点与应用场景，包括它们如何影响页面布局及层级显示，同时提供了实例代码帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

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