IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    读书笔记-css 定位

    admin发表于 2015-06-09 10:49:10
    love 0

    static是position的默认值
    可以使用 position:relative 对元素从排列顺序的当前位置进行偏移
    可用position:absolute 对元素从排列顺序的当前位置或依照定位最近的祖先元素进行偏移
    用position:fixed 对元素参照视窗进行偏移

    浮动与清除

    问题:想把一个元素从正常排列顺序中移除,并令它靠父元素的左侧或右侧显示。想把它当作块状元素来解析,并排列在父元素内边距所包围的区域里。还想让它的顶部基于原始提取位置进行排列。还想控制邻近的其他浮动元素或非浮动内容,或把它们移到自己的下面。

    解决方案:
    使用float:left和float:right
    用float:none覆盖其他元素进行浮动定位的规
    浮动元素的定位层位置块状元素之上,与正常排列中的内联内容是相邻的。左浮动是对它的右侧内容缩进,右浮动是对它的左侧内容缩进。
    浮动不影响块状盒模型的定位,只影响它们的内联内容。
    用clear:left把浮动元素左侧的块状元素或其他浮动元素移到它的下面
    用clear:right把浮动元素右侧的块状元素或其他浮动元素移到它的下面
    用clear:both把浮动元素两侧的块状元素或其他浮动元素同时移到下面
    相对浮动

    问题:想在不影响其他元素(包括其他浮动元素和内联内容)定位的前提下,把浮动从现在位置上偏移。你还想控制浮动元素的(浮动元素之间或与其他定位元素之间)堆叠顺序。

    解决方案:用position:relative对浮动元素进行相对定位。相对浮动还保留了元素在原始浮动排列顺序中的位置,只是用left和top将它从原来的位置上做一定的偏移。相对浮动也是在定位层被解析的,它允许你用z-index控制它相对于其他浮动元素和定位元素的堆叠顺序。因为相对浮动也是对元素的一种定位方式,所以它的绝对后代可相对于它来进行定位。


    © admin for 可乐吧, 2015. | Permalink | No comment | Add to del.icio.us
    Post tags: css 定位

    您可能也喜欢:
    读书笔记 - css 继承
    读书笔记 - css 盒模型
    css绝对定位在ie6下的bug解决方法
    css语法细节、html元素(读书笔记)
    无觅

    Feed enhanced by Better Feed from Ozh



沪ICP备19023445号-2号
友情链接