css: About Position

position:relative 相对定位

1.仍在文档流中
2.参照物为元素本身
** 使用场景:绝对定位元素的参照物 **


屏幕快照 2016-07-21 下午12.14.51.png

position:absolute 绝对定位

1.默认宽度为内容宽度
2.脱离文档流(如下图,下面的元素上浮)
3.参照物为第一个定位祖先/根元素
如果给绝对定位设置了top、bottom、left、right 则改元素会被撑为符合改条件的大小
** 使用场景:布局-轮播头图 **


屏幕快照 2016-07-21 下午12.22.03.png
屏幕快照 2016-07-21 下午12.24.54.png

position:fixed 固定定位元素

1.默认宽度为内容宽度
2.脱离文档流
3.参照物为视窗
** 使用场景:布局-固定顶栏、遮罩 **

屏幕快照 2016-07-21 下午12.40.15.png
屏幕快照 2016-07-21 下午12.42.34.png

案例三行自适应布局

body部分自适应,head、foot固定


屏幕快照 2016-07-21 下午12.56.02.png

说明:body部分采用了top、bottom、left、right方式撑满了整个视窗。

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 962评论 0 1
  • display:设置元素的显示方式 display:block(块级元素) 默认为父元素宽高,可设置宽高相对前序换...
    bluishwhiteC阅读 669评论 0 0
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,662评论 0 30
  • 网页的布局其实在我理解起来,就类似于排版的问题。有点像平面设计中的内容排版。只不过平面设计中的排版是在photos...
    荷小音阅读 901评论 0 2