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

相关文章

来自专栏IMWeb前端团队

组件化开发--实践记录与总结

组件的规范可在组件实现时通过代码风格和格式来约束,也可通过基类扩展来强制规范。所以,当组件都是通过同一个基类扩展而来时,在那个基类上就可以很方便地统一组件规范,...

2117
来自专栏从零开始学 Web 前端

JavaScript基础(一)概述

ECMAScript(前身为欧洲计算机制造商协会):JavaScript的语法规范

723
来自专栏代码世界

Django之ModelForm详解

1274
来自专栏企鹅号快讯

我们编写 React 组件的最佳实践

刚接触 的时候,在一个又一个的教程上面看到很多种编写组件的方法,尽管那时候 框架已经相当成熟,但是并没有一个固定的规则去规范我们去写代码。 在过去的一年里,...

1597
来自专栏Lambda

【第一季】Vue2.0内部指令

学习这套课程你需要的前置知识: HTML的基础知识,你需要达到中级水平,写前端页面的结构代码完全没有问题。 CSS的基础知识,最好做过半年以上的切图和布局,最...

1689
来自专栏疯狂的小程序

微信小程序组件化编程和实践(下)

现在我们已经可以做到了两个组件之间的数据传递,那么如何在多个组件间传递数据呢?

3307
来自专栏iKcamp

React 深入系列1:React 中的元素、组件、实例和节点

文:徐超,《React进阶之路》作者 授权发布,转载请注明作者及出处 ---- React 深入系列,深入讲解了React中的重点概念、特性和模式等,旨在...

3548
来自专栏前端架构

移动端的touch事件处理

  在iPhone 3Gs发布的时候,其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后,Android上的浏览器也实现了相同...

581
来自专栏有趣的django

21天打造分布式爬虫-urllib库(一)

urlparse和urlsplit都是用来对url的各个组成部分进行分割的,唯一不同的是urlsplit没有"params"这个属性.

683
来自专栏阿北的知识分享

Yii2的GridView使用大全 --- 18个问答

GridView主要是为了实现表格复用,尤其我们做后台的时候,你发现表单和表格占据了大部分页面,而表格的样式又是高度的统一,那么如果有这样一个挂件,传入数据集自...

2377

扫描关注云+社区