美文网首页
css定位方式总结

css定位方式总结

作者: 勿忘初心方始终 | 来源:发表于2016-07-21 11:55 被阅读0次

    什么是文档流?

    按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属性的祖先元素定位,脱离标准文档流,重新定位的元素不会占用原来的位置

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

    固定定位

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

    相关文章

      网友评论

          本文标题:css定位方式总结

          本文链接:https://www.haomeiwen.com/subject/mrjbjttx.html