很多大平臺我們總能看到一些暫時圖片，自動播放商品給你，你也可以點選下標進行切換。今天給大家簡單講解下下標的定位。
工具/原料
txt編輯器
搜狗瀏覽器
方法/步驟
首先建立一個資料夾，增加一張圖片和一個txt文件。
對txt文件加入標準的html規範（對於一名初級學習，儘量保持好的習慣使用txt編寫熟悉），加入標準後我們簡單加入一個div和li。
將txt另存為html檔案，然後用搜狗瀏覽器開啟。可以看到效果如下:，然後F12進行編輯，如何編輯詳細參考我的另一篇文章，“ css程式設計方便教學—使用瀏覽器”。
下面是我對樣式進行修改或者追加的一些熟悉,先清除li對於樣式，具體如下，調整div大型位置與圖形大小相同，並設定overflow=“hidden”來隱藏越界內容。
通過預覽我們會發現,li不見了，這是因為越界了，需要使用position屬性來進行設定，到底該怎麼設定position的屬性呢。我們可以用圖來表示。我們可以看到圖片和下標同級，因為圖片大小我們已經設定成div大小，所以li下標部分越界了。
我們現在就需要使用position來進行調整。position：有static靜態（預設）、relative相對位置、absolute絕對位置、fixed固定位置。根據上圖的位置分析，我們知道要想讓被隱藏的東西顯示出來，這四個中只有absolute、fixed這兩種能實現，然而fixed是固定在哪裡的，所以我們只能使用absolute。
通過設定我們看到瀏覽器變化，li出現了但是我們發現他出現在div外了，這表示的li定位是相對於整個頁面，而我們想達到的目的是相對於div，根據第5步，容器解析，可以li的父類是div，由於我們沒有對div進行定位，所以它預設是static,而li是div下的，就延續了div的定位基礎上再定位。這個時候我們對div追加定位屬性非static，就會發現li出現了。(本例使用的relative)
我們發現小標顯示不是豎排的，我們可以通過css進行修改，設定一些東西。然後再看看效果.
注意事項
實現後多思考