前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何通过css控制内容显示顺序 第二行的内容优先显示

如何通过css控制内容显示顺序 第二行的内容优先显示

作者头像
ytkah
发布2018-03-05 17:15:08
2.8K0
发布2018-03-05 17:15:08
举报
文章被收录于专栏:ytkahytkah

  我们有时进行网页设计时为了想让用户感兴趣的内容优先显示在前,又不想改动代码的先后顺序,要怎么操作呢?(或者换种说法:源代码中要先看到A再看到B,而视觉上是先B再A)举个简单的例子,想让第二行的内容在不改动代码的情况在视觉上显示在第一行。如图,左图是正常显示,想让它们对换一下顺序,像右图一样展示出来。

正常顺序显示
正常顺序显示
对调顺序显示
对调顺序显示

  我们可以通过div+css的形式来定义

  css中position的absolute(绝对)和relative(相对)两个参数,我们将上面右图的css作如下定义:

代码语言:javascript
复制
.bock1 { width:300px; height:100px; background:#ffcccc;position:relative; margin-top:100px;}
.bock2 { width:300px; height:100px; background:#65b6be;position:absolute;top:0;}

  保存,刷新一下页面试试,是不是你想要看到的效果了?

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-05-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档