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

  我们有时进行网页设计时为了想让用户感兴趣的内容优先显示在前,又不想改动代码的先后顺序,要怎么操作呢?(或者换种说法:源代码中要先看到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;}

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学自动化测试

pytest文档19-doctest测试框架

doctest从字面意思上看,那就是文档测试。doctest是python里面自带的一个模块,它实际上是单元测试的一种。 官方解释:doctest 模块会搜索那...

872
来自专栏漫漫深度学习路

tensorflow学习笔记(四十一):control dependencies

tf.control_dependencies()设计是用来控制计算流图的,给图中的某些计算指定顺序。比如:我们想要获取参数更新后的值,那么我们可以这么组织我们...

4179
来自专栏三流程序员的挣扎

Python 小白的第一次实践——将统计数据转成 Execl

公司项目的广告展示率太低,需要查找原因,之前做了统计埋点,运维给出过滤后的数据,一个 txt 文件 500M 以上,文件打开非常乱。

701
来自专栏数据和云

利用SHELL脚本来验证Oracle数据库RMAN备份集的有效性

编辑手记:一切都有可能而且将会发生故障。只有未雨绸缪才能防患未然。 作者简介:赵全文 ? 就职于太极计算机股份有限公司,在 中央电化教育馆 做Oracle...

2845
来自专栏地方网络工作室的专栏

Python3 初学实践案例(4)可设定长度和密码复杂级别的生成密码脚本

Python3 初学实践案例(4)可设定长度和密码复杂级别的生成密码脚本 在学习 python 的第一次实战中,我就完成了一个生成密码的脚本。原文链接:http...

20210
来自专栏飞雪无情的博客

Go语言实战笔记(十四)| Go 通道

上一篇我们讲的原子函数和互斥锁,都可以保证共享数据的读写,但是呢,它们还是有点复杂,而且影响性能,对此,Go又为我们提供了一种工具,这就是通道。

803
来自专栏飞雪无情的博客

Go语言实战笔记(十三)| Go 并发资源竞争

上一篇我们讲的原子函数和互斥锁,都可以保证共享数据的读写,但是呢,它们还是有点复杂,而且影响性能,对此,Go又为我们提供了一种工具,这就是通道。

431
来自专栏性能与架构

Redis3 cluster 原理

Redis3 正式支持了 cluster,是为了解决构建redis集群时的诸多不便 Redis3 之前的集群问题 redis就像一个箱子,里面放着N个 {k...

3926
来自专栏一枝花算不算浪漫

集群扩容的常规解决:一致性hash算法

802
来自专栏运维小白

5.5 进入编辑模式

编辑模式:就是进入到可以编辑文本文件的模式 ? 进入编辑模式方法: i ,直接在当前光标处进入编辑模式 I (大写I),光标直接移动到该行的行首,并进入编辑...

1767

扫码关注云+社区