1. 程式人生 > 其它 >如何通過css控制內容顯示順序 第二行的內容優先顯示

如何通過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;}

  儲存,重新整理一下頁面試試,是不是你想要看到的效果了?