h5的相對定位、絕對定位、固定定位以及案例練習
阿新 • • 發佈：2019-01-01
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #right,#left,#center{ float: left; } #left{ width: 200px; height: 200px; background-color: yellow; } #center{ width: 200px; height: 200px; background-color: #cccccc; /*position: relative;*/ position: absolute; top: 20px; left: 20px; /*z-index 可以改變浮動的佈局 z-index可以在相對和絕對定位中使用*/z-index: -1; } #right{ width: 200px; height: 200px; background-color: aquamarine; } </style> <title>定位</title> </head> <body> <!--css定位屬性position static relative 相對定位 absolute 絕對定位 fixed 固定定位--> <!--css其他定位屬性 top right bottom left Z-index--> <!--相對定位是相對於元素的原始位置,移動後仍然佔據原來的位置--> <!--絕對定位是相對於最近的定位父元素進行定位。定位後，原來的位置會被其他元素補充（定位後他的位置會空出來） 採用絕對定位的元素，會尋找離他最近的採用了定位的父元素，並以其為座標進行定位 若所有父元素都沒使用定位，則以body為座標進行定位--> <!--固定定位類似於絕對定位，根據視窗原點進行偏移定位，不會根據滾動條的滾動進行偏移--><div style="position: relative;top: 50px;left: 100px"> <div> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> </div> </body> </html>
書籤式介面的方法線、點、方框全是圖片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .biao{ position: relative; height: 700px; width: 1011px; background-color:darkgrey; } .shu{ position: absolute; width: 1px; height: 658px; background-image: url("../../img/f1_line.png"); left: 505px; top: 21px; } .dian1{ background-image: url("../../img/f1_dot.png"); position: absolute; width: 18px; height: 18px; top: 20px; left: -8.5px; } .tu1{ background-image: url("../../img/f1_2016.png"); position: absolute; width: 480px; height: 167px; left: -481px; top: -16px; } .dian2 { background-image: url("../../img/f1_dot.png"); position: absolute; width: 18px; height: 18px; top: 60px; left: -8.5px; } .tu2{ background-image: url("../../img/f1_2015.png"); position: absolute; width: 480px; height: 167px; left:18px; top: -15px; } .dian3{ background-image: url("../../img/f1_dot.png"); position: absolute; width: 18px; height: 18px; top: 220px; left: -8.5px; } .tu3{ background-image: url("../../img/f1_2014.png"); position: absolute; width: 480px; height: 167px; left: -481px; top: -16px; } .dian4{ background-image: url("../../img/f1_dot.png"); position: absolute; width: 18px; height: 18px; top: 260px; left: -8.5px; } .tu4{ background-image: url("../../img/f1_2013.png"); position: absolute; width: 480px; height: 167px; left:18px; top: -15px; } .dian5{ background-image: url("../../img/f1_dot.png"); position: absolute; width: 18px; height: 18px; top: 420px; left: -8.5px; } .tu5{ background-image: url("../../img/f1_2012.png"); position: absolute; width: 480px; height: 167px; left: -481px; top: -16px; } .dian6{ background-image: url("../../img/f1_dot.png"); position: absolute; width: 18px; height: 18px; top: 460px; left: -8.5px; } .tu6{ background-image: url("../../img/f1_2011.png"); position: absolute; width: 480px; height: 167px; left:18px; top: -15px; } </style> <title>書籤</title> </head> <body> <div class="biao"> <div class="shu"> <div class="dian1"> <div class="tu1"></div> </div> <div class="dian2"> <div class="tu2"></div> </div> <div class="dian3"> <div class="tu3"></div> </div> <div class="dian4"> <div class="tu4"></div> </div> <div class="dian5"> <div class="tu5"></div> </div> <div class="dian6"> <div class="tu6"></div> </div> </div> </div> </body> </html>固定定位的運用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><style>#back{ width: 150px; background-color: #4d2e83; height: 50px; text-align: center; line-height: 50px; position: fixed; bottom: 50px; right: 50px; /*z-index 一般設定為一個極大的數值 數字越大越在前*/z-index: 1000; } </style><title>固定定位</title></head><body><div style="height: 2000px"><div id="back">返回i頁面頂部</div></div></body></html>