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

最新推荐文章于 2023-01-04 16:17:01 发布

weixin_30505043

最新推荐文章于 2023-01-04 16:17:01 发布

阅读量129

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ytkah/p/4522776.html

版权

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

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

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

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

.bock1 { width:300px; height:100px; background:#ffcccc;position:relative; margin-top:100px;}
.bock2 { width:300px; height:100px; background:#65b6be;position:absolute;top:0;}

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

转载于:https://www.cnblogs.com/ytkah/p/4522776.html