position

定位

·position-设置定位方式,定位的方式最重要的是设置参照物

·top,right,bottom,left,z-index - 设置位置

top/right/bottom/left 元素边缘距参照物边缘的距离


z-index 设置元素在Z轴上的排序

z-index 栈

position:static|relative|absolute|fixed

position:relative

·相对定位的元素仍在文档流中

·相对定位的元素参照物是元素本身

·改变了元素的层级

使用场景:绝对定位元素的参照物

position:absolute

·默认宽度为内容宽度

·脱离文档流

·参照物为第一个定位祖先/根元素

布局 - 轮播头图

position:fixed

·默认宽度为内容宽度

·脱离文档流

·参照物为视窗

position:fixed 在ie6及以下不支持

布局 - 固定顶栏

布局-遮罩

布局 - 三行自适应布局

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,801评论 1 92
  • CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~...
    fehysunny阅读 2,956评论 0 7
  • 浮动定位 BFC 边距合并 浮动元素 div的顺序是HTML代码中div的顺序决定的。 浮动可以理解为让某个div...
    nianxiaoge阅读 733评论 0 0
  • 我们在布局的时候经常会使用到position的属性,那么你真的完全了解它吗? position概念 positio...
    一木_qintb阅读 1,923评论 0 4
  • 1.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流(normal flow),也称为标准文档流、常规...
    犯迷糊的小羊阅读 589评论 0 1