美文网首页
CSS的四种布局方式static/relative/fixed/

CSS的四种布局方式static/relative/fixed/

作者: 后来的猿 | 来源:发表于2018-06-28 20:49 被阅读0次

    static 

    static布局是HTML元素默认的布局方式,并且static布局的元素不会受到top/left/bottom/right属性的影响。布局元素的位置即其在标准文档流中的位置。

    relative 

    相对布局是相对其在标准文档流中的位置而言的。设置其top/left/bottom/right属性会使该元素脱离标准文档流,但是其在标准文档流中的位置依然被保留,不会被其他元素填补。

    fixed 

    fixed布局是相对于屏幕视点进行定位的,意味着即使拖动页面滚动轴移动时,采用该布局的元素相对屏幕的位置不发生改变。 

    fixed布局可以使用top/left/bottom/right进行定位,采用fixed布局的元素完全脱离了标准文档流,其原来在标准文档流中的位置会被其他元素占据;

    absolute 

    绝对定位元素是相对于其最邻近的已定位的祖先元素进行定位的。如果一个绝对定位的元素没有已定位的祖先元素,则使用document body作为已定位元素。这里所说的“已定位元素”指的是采用除了static以外的布局方式父元素,包括采用absolute定位的父元素。 

    相关文章

      网友评论

          本文标题:CSS的四种布局方式static/relative/fixed/

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