Home > Web前端 > 用css的position属性控制div顺序

用css的position属性控制div顺序

2009/01/04

起因:
一直想弄个微博客作为博客的副标题,然后通过提供商的js调用显示,这样更新就比较方便。然而通过调用外部的js,网站的载入速度会打折扣,有什么办法能控制显示顺序?

原理:
浏览器的解析顺序是由上至下,我们把比较影响速度的js放在最后,然后通过position属性控制div的显示顺序。

 

实例:
本博客调用副标题是调用时taotao的js,所属的div的id是

<div id=”taotao>

 

然而查看本页源代码后你会发现,

这个标签对却显示在后面,这样做的好处是,页面载入时是先显示主要内容在显示次要的,刷新本页面就能发现。这里主要用到position的absolute和relative两个参数。

 

position属性可将元素以static(静态),relative(相对),absolute(绝对)或是fixed(固定)的方式来安置,fixed属性在ie6下不被支持。

先看看taotao的css代码:

#taotao {position:absolute;/*这个层在页面的绝对位置*/top:0;/*就是让层显示在最上面*/width:100%;}

为了让其显示居中,加了个子层

<div id=”description>

其css代码:

#description {position:relative;/*在其父层taotao里的相对位置*/color:#91B24F;left:115px;/*距离taotao左边的距离*/margin:0 auto;/*这个用来让div居中*/top:35px;width:960px;}

结论:
其实还可以通过js来控制显示顺序,但是通过css我感觉是最简单。我们通过这种方法能够自由的控制各个层的显示,让主要内容先显示。
其实在本站还有个这样的例子就是标题右边的日期显示。日期的层也是放在最后的,这主要考虑到SEO,因为文章的日期算是比较次要,蜘蛛爬行抓取是也是由上至下抓取,这样能把主要内容体现出来。
通过position还可以应用在更多好玩的东西,各位举一反三就可以。

延伸想法:
如果全站都用position来布局会怎么样?有空研究一下。

Tags: Posted in Web前端19 Comments

已经有了19条煽情的读后感

  1. 高手啊!
    我啥都没看懂!
    只是觉着你很牛!
    我是看了 你的免费相册介绍 转悠过来的!
    只是觉得得顶一下!

  2. 你的博客是什么博客啊!?

  3. 不是谷歌的啊?!
    那怎么我都登陆了?!

  4. 你首页的 磐石 是我哎!

  5. 感觉你博客太浅了!
    有点刺眼!
    你说那些博客互踩网站,(我首页边栏有个)有用吗?

  6. 我用IE8 你评论这里有点问题

  7. 其他的都没什么问题..只是..JS自带的一个大图和更多消息不会去掉.

  8. 这个可以改为Twitter代码吗??
    桃桃不是经常使用!

  9. 博主,请问一下,你的滔滔代码应该放在什么地方,我弄了半天还是没有弄懂。谢了

  10. 哪里哪里,其实我还很菜的

  11. 这是一个国外很著名的php程序博客-wordpress,主题是自己写的

  12. 首页那个是用到Google的friend connect,这是一个社区插件,真正的程序不是放在Google上面的。

  13. 我觉得没那个必要把,如果你能把握内容让访客喜欢的话,相信你的博客就会一传百,搞那些表面的互踩等不到忠实的访客的,都是昙花一现。

  14. 谢谢你发现了这个问题,现在已经修复了

  15. 如果你跟我用的div熟悉名师description,你只要在css下添加#description table{display:none;}就可以了,以此类推。

  16. 相对位置又出问题了.吖= =
    .今天懒动了.明天在出来搞.
    .睡觉.

  17. 理论只要能调用的都可以的。

Pingbacks/Trackbacks

  1. [...] 这点我个人感觉很实用而且很有效,特效在现在的注重于用户交互的网站,其中的javascript好几个加起了也至少有好几十K。浏览器的解析顺序是由上到下,而网站的主要的就是内容,把Scripts放到底部能够保证访客最先看到的是内容。这里有个我优化的例子:用css的position属性控制div顺序。不过有时候把所有的Scripts放到底部可能会导致部分功能失效,这点要特别注意,及时进行调试。 [...]

  2. [...] 这点我个人感觉很实用而且很有效,特效在现在的注重于用户交互的网站,其中的javascript好几个加起了也至少有好几十K。浏览器的解析顺序是由上到下,而网站的主要的就是内容,把Scripts放到底部能够保证访客最先看到的是内容。这里有个我优化的例子:用css的position属性控制div顺序。不过有时候把所有的Scripts放到底部可能会导致部分功能失效,这点要特别注意,及时进行调试。 [...]

发表感言