您的位置:主页 > dede建站仿站 >

html中position的绝对定位和相对定位

2015-09-14作者:伟伟来源:未知次阅读

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现。
    
    绝对定位position用于定位盒子对象,有时一个布局中几个小对象,不易用css padding、css margin进行相对定位,这个时候我们就可以使用绝对定位来轻松搞定。特别是一个盒子里几个小盒子不规律的布局,这个时候我们使用position绝对定位非常方便布局对象。如下图片显示:
    html中position的绝对定位和相对定位
    html中position的绝对定位和相对定位图示
    
    position:absolute 绝对定位,
    
    position:relative 相对定位,
    
    绝对定位使用条件
    
    绝对定位使用通常是父级定义position:relative定位,子级定义position:absolute绝对定位属性,并且子级使用left或right和top或bottom进行绝对定位。通俗来讲,就是父级必须要有一个position:relative相对定位,里面的子级才能用position:absolute来对其正行绝对定位。父级只加position:relative相对定位属性,是不会影响父级现有的位置的。
    
    例如:
    
    .divcss5{position:relative} 定义,通常最好再定义CSS宽度和CSS高度
    
    .divcss5-a{position:absolute;left:10px;top:10px} 这里定义了距离父级左侧距离间距为10px,距离父级上边距离为10px
    
    或
    
    .divcss5-a{position:absolute;right:10px;bottom:10px} 这里定义了距离父级靠右距离10px,距离父级靠下边距离为10px
html中position的绝对定位和相对定位
 

凡本站注明“本站”或“投稿”的所有文章,版权均属于伟伟SEO或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。本站已授权使用的作品,应在授权范围内使用,并注明“来源:伟伟SEO”并附上链接。违反上述声明者,本站将追究其相关法律责任。

编辑:深圳网站优化公司 关键词:

网友评论

博主推荐

图文聚集

热门排行

最新文章

  • 官方微信