• 技术文章 >web前端 >html教程

    HTML+CSS-浅谈:相对定位与绝对定位_html/css_WEB-ITnose

    2016-06-24 11:40:46原创844

    相对定位和绝对定位

    ·定位标签:position
    ·包含属性:relative(相对) absolute(绝对)


    1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上。然后通过设置垂直或水平位置,让这个元素"相对于"它的原始起点进行移动。(再一点,相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他框)


    2.position:absolute; 表示绝对定位,位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流,因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。(因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高,它显示的越在上层。)


    3.父容器使用相对定位,子元素使用绝对定位后,这样子元素的位置不再相对于浏览器左上角,而是相对于父窗口左上角


    4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置,这四个属性只有在该元素使用定位后才生效,其它情况下无效。另外这四个属性同时只能使用相邻的两个,不能即使用上又使用下,或即使用左,又使用右。



    版权声明:本文为博主原创文章,未经博主允许不得转载。

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:火狐浏览器的表单问题,求解_html/css_WEB-ITnose 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 为什么是这样的?_html/css_WEB-ITnose• [翻译]解读CSS中的长度单位_html/css_WEB-ITnose• 引入外部CSS的两种方式及区别_html/css_WEB-ITnose• 如何考评一名前端工程师?_html/css_WEB-ITnose• web开发中比较常用的html标签_html/css_WEB-ITnose
    1/1

    PHP中文网