您在divcss.net的位置首页 >> DIV+CSS教程 >> 教程正文

第十四课 如何进行CSS定位

 skeeter | Div+css教程 | 2010-3-27 | 193点击 | 0评论

这一课,我们将更系统更详细的学习css定位,css定位有CSS相对定位和CSS绝对定位,这一课都将有详细解释

这章，我们将要更系统更详细的学习css定位。准备好了吗？


--------------------------------------------------------------------------------


CSS 相对定位



设置为相对定位的元素会根据参数偏移相应距离。但它原本所占的空间仍保留。


相对定位是一个非常容易掌握的概念。对一个元素进行相对定位，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。


将 top 设置为 20px，那么元素将在原位置顶部往下 20 像素的地方，也就是元素向下移动。


将 left 设置为 30px，那么元素将在原位置往右 30 像素的地方，也就是元素向右移动。


#box_relative {

  position: relative;

  left: 30px;

  top: 20px;

}


如下图所示（框2）：


注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素可能会导致它覆盖其它元素。
 


--------------------------------------------------------------------------------


CSS 绝对定位


绝对定位会使元素不占据空间。这一点与相对定位不同，相对定位实际上属于普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。而绝对定位则完全不属于普通流的模型中。


普通流中其它元素（框1，框2）的布局就像绝对定位的元素（框3）不存在一样，不会有任何冲突：


#box_absolute {

  position: absolute;

  left: 30px;

  top: 20px;

}


如下图所示：



绝对定位的元素的位置相对于最近的已定位（有设置过position属性的）父元素，如果元素没有已定位的父元素，那么它的位置相对于最初（最顶层）的包含块（如body）。


--------------------------------------------------------------------------------


小结


现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位父元素，如果不存在已定位的父元素，那么“相对于”最初的包含块。


提示：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。


提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index属性 来控制这些元素的上下堆放次序。

关键字:CSS定位,CSS相对定位,CSS绝对定位,div+css入门教程

上一篇:第十三课 网页布局如何实现CSS定位下一篇:第十五课 如何实现CSS浮动

添加评论



站长杂谈

最新动态 | SEO | 网站推广 | 网站建设

  • 传腾讯全面购康盛创想 discuz!落户腾讯 传腾讯全面购康盛创想 discuz!落户腾讯 2010-8-23 11:57:15 26次阅读

    今日有媒体爆出腾讯已经全面收购建站平台Discuz！的开发公司——北京康盛创想，进军中小网站市场

  • 侵权盗版网站黑名单即将建立 侵权盗版网站黑名单即将建立 2010-7-22 11:47:41 52次阅读

    此次行动后将建立侵权盗版网站黑名单制度。名单将在国家版权局网站上不定期发布并抄送提交三大电信...

  • 如何应对拍照备案 如何应对拍照备案 2010-7-19 10:37:03 72次阅读

    就目前而言，拍照备案已成定局。 据一名行业网站的站长透露，目前他最担心的就是需要现场拍照，因...

  • 日本称中国网购仿冒品泛滥 日本称中国网购仿冒品泛滥 2010-7-11 12:55:34 60次阅读

    据日本共同社10日报道，为掌握仿冒品的流通情况，日本经产省于2009年度在中国的主要网络商城...

好书推荐

DIV+CSS | SEO | 网络编程 | 网站设计

鄂ICP备06008892号divcss.net