css定位方式总结

什么是文档流?

按w3c规范中这个其实叫normal-flow,即普通流,只是国内翻译者习惯将其翻译成文档流

定义:元素按照其在HTML中的位置顺序排列决定排布过程,并且过程遵循标准的描述

position属性

元素在页面中的布局遵守一套文档流的方式,默认的定位属性值为static,即未被设置定位的。

元素如果被定位了,那么它的top,left,bottom,right值就会生效,能设置定位的属性是relative,absolute和fixed。

需要注意的另一点是被定位的元素层次(z-index)会得到提高。

css中定位机制有哪几种?

浮动定位(float)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)

浮动定位

特点:元素排除在普通流之外,可通过float:left或float:right将它放置在包含框的左边或者右边,但是

依旧位于包含框之内。

相对定位

相对元素本身定位,没有脱离标准文档流,元素本身所占的位置被保留

绝对定位

相对于最近的一个已经设置position属性的祖先元素定位,脱离标准文档流,重新定位的元素不会占用原来的位置

如果没有已经定位的祖先元素,则以浏览器窗口为基准进行定位

固定定位

相对可视窗口进行偏移,不受浏览器滚动条影响

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,696评论 1 92
  • 学习建议 定位、浮动是 CSS 核心知识点,必须熟练掌握。 1.文档流的概念指什么?有哪种方式可以让元素脱离文档流...
    饥人谷_任磊阅读 4,770评论 0 3
  • 在CSS中关于定位的内容是:position:relative | absolute | static | fix...
    feelinghappy618阅读 3,848评论 0 0
  • 以下文章是我在网上收集的内容,为了记录自己的学习以及为了以后不到处找而记录下来,如果对你有用,请感谢写这些文章的前...
    DCbryant阅读 4,500评论 0 2
  • 涉及lesson7、lesson8、lesson9 学大词(有砖瓦):通过“拼读” ――学核心“提问” 悟小词(粘...
    SunnySun_fb42阅读 1,544评论 0 0

友情链接更多精彩内容