我們有時進(jìn)行網(wǎng)頁設(shè)計時為了想讓用戶感興趣的內(nèi)容優(yōu)先顯示在前，又不想改動代碼的先后順序，要怎么操作呢？（或者換種說法：源代碼中要先看到A再看到B，而視覺上是先B再A）舉個簡單的例子，想讓第二行的內(nèi)容在不改動代碼的情況在視覺上顯示在第一行。如圖，左圖是正常顯示，想讓它們對換一下順序，像右圖一樣展示出來。

?

　　我們可以通過div+css的形式來定義

　　css中position的absolute(絕對)和relative(相對)兩個參數(shù)，我們將上面右圖的css作如下定義：

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/ytkah/p/4522776.html

總結(jié)

以上是生活随笔為你收集整理的如何通过css控制内容显示顺序 第二行的内容优先显示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。