如何通过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 条评论
登录 后参与评论

相关文章

来自专栏V站

Knowledge丨WordPress数据库文件分析

折腾WordPress必须要有很厚的基础才行,深入更是要小心。西顾再次mark下来知更鸟的文章,做下笔记。想研究模板,可review下前文《Skill丨Word...

1694
来自专栏iOS122-移动混合开发研究院

实现iOS图片等资源文件的热更新化(一): 从Images.xcassets导出合适的图片

本文会基于一个已有的脚本工具自动导出所有的图片;最终给出的是一个从 Images.xcassets 到基于文件夹的精简 合适 的图片资源集的完整过程.难点在于从...

2719
来自专栏BY的专栏

快速完成JSON\字典转模型 For YYModelJSON转模型 For YYModel

3928
来自专栏Android开发指南

Android如何缩减APK包大小

2735
来自专栏Android开发经验

hellocharts-android-Android图表开源库的使用(一)

1434
来自专栏算法channel

TensorFlow笔记|Get Started

本系列推送主要参考: Stanford University CS20SI: Tensorflow for Deep Learning Research. Te...

3558
来自专栏AI研习社

AI-Blocks:可以让任何人创建机器学习模型的所见即所得交互界面 | Github 项目推荐

AI-Blocks 是一个强大且直观的所见即所得交互界面,可以让任何人都创建机器学习模型。 ? AI-Block 通过可拖动的对象来创建简单的场景,该模型可以直...

36916
来自专栏DeveWork

解决WordPress文章密码保护在首页(摘要)不起作用

如果你碰到这个问题,就说明你的主题还不够完善。是的,之前Devework主题也是这样,但现在已经修复了。这类问题都是,首页的文章上如果是摘要显示的或者截断输出的...

1998
来自专栏小樱的经验随笔

Windows环境下php开启GD库的方法

一、GD库是什么?   GD库是php处理图形的扩展库,GD库提供了一系列用来处理图片的API,使用GD库可以处理图片,或者生成图片,也可以给图片加水印。在网站...

3205
来自专栏目标检测和深度学习

tesseract-ocr识别英文和中文图片文字以及扫描图片实例讲解

822

扫码关注云+社区