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

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

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

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

目录
相关文章
|
7月前
|
编解码 前端开发 数据挖掘
【专栏:HTML 与 CSS 移动端开发篇】移动优先的网页设计理念
【4月更文挑战第30天】本文探讨了移动优先的网页设计在HTML和CSS移动端开发中的重要性。随着移动设备普及,移动优先设计理念旨在首先满足移动端用户需求,提供良好体验。通过响应式设计、简洁布局、优化资源和触摸友好交互,确保网站在移动设备上的表现。实施步骤包括分析用户需求、设计原型、编写代码和测试优化。注意避免过度设计,保持一致性,关注性能,并适应不同平台。移动优先设计是提升用户体验和竞争力的关键,随着技术发展,这一理念将持续演进。
116 2
|
前端开发 CDN
css: Tailwind CSS一个功能类优先的 CSS 框架
css: Tailwind CSS一个功能类优先的 CSS 框架
195 0
css: Tailwind CSS一个功能类优先的 CSS 框架
|
前端开发 JavaScript 计算机视觉
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
1125 0
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
|
前端开发 JavaScript
闲来无事,配合CSS变量搞个Vue数据显示组件吧~
闲来无事,配合CSS变量搞个Vue数据显示组件吧~
201 0
|
前端开发
CSS:页面美化和布局控制
CSS:页面美化和布局控制
108 1
|
前端开发 容器
CSS移动端布局和文字溢出显示省略号
文章主要学习使用css文字溢出处理和溢出部分效果的处理
310 0
CSS移动端布局和文字溢出显示省略号
|
前端开发 JavaScript
css控制超出宽度 ...展示
css控制超出宽度 ...展示
196 0
|
Web App开发 移动开发 前端开发
css的这些内容你可能知道,但是又不完全知道(二)(BFC解决一些问题的本质)
css的这些内容你可能知道,但是又不完全知道(二)(BFC解决一些问题的本质)
|
前端开发 容器
css的这些内容你可能知道,但是又不完全知道(一)(下)
css的这些内容你可能知道,但是又不完全知道(一)
|
前端开发
css的这些内容你可能知道,但是又不完全知道(一)(上)
css的这些内容你可能知道,但是又不完全知道(一)