前端定位方式 · 常用筆記

# 前端定位方式 ![](https://img.kancloud.cn/c3/d2/c3d2b08902c6f6d581cc5d9b7a7258be_885x418.png) ### 陰影 ![](https://img.kancloud.cn/2b/66/2b66b47f0abb94ebd475e10a8f125a6b_553x79.png) ![](https://img.kancloud.cn/26/b5/26b551fd0b11db73b69662ff76c14b73_695x355.png) ### 定位 1. ``` <pre class="calibre15">``` Absolute：絕對定位，是相對于最近的且不是static定位的父元素來定位 ``` ``` 2. ``` <pre class="calibre15">``` Fixed：絕對定位，是相對于瀏覽器窗口來定位的，是固定的，不會跟屏幕一起滾動。 ``` ``` 3. ``` <pre class="calibre15">``` Relative：相對定位，是相對于其原本的位置來定位的。 ``` ``` 4. ``` <pre class="calibre15">``` Static：默認值，沒有定位。 ``` ``` 5. ``` <pre class="calibre15">``` Inherit：繼承父元素的position值。 ``` ``` ``` <pre class="calibre13">``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>positon</title> </head> <body> <div class="container"> <div class="div1">第一個</div> <div class="div2">第二個</div> <div class="div3">第三個</div> <div class="div4">第四個</div> </div> </body> <style> .container{ display: flex; flex-wrap: wrap; } .div1 { height: 50px; background-color: rgb(240, 8, 136); } .div2 { position: absolute; top: 30px; left:30px; height: 50px; background-color: rgb(34, 231, 87); } .div3 { height: 50px; background-color: rgb(35, 147, 245); } .div4 { height: 50px; background-color: rgb(240, 163, 19); } </style> </html> ``` ``` ![](https://img.kancloud.cn/97/e9/97e9e851e283346f1ac9085748eb62c3_414x311.png) **第二個div設置了absolute,則該div的寬度就由文本決定，且下面的div會上移占據之前第二個div的位置，top和left是相對于離它最近且不是static定位的父元素來定位的，在此div2因為沒有父元素，所以第二個div相對于根元素即html元素來定位** ``` <pre class="calibre13">``` 將第二個div設置為relative： .div2{ height:100px; background-color: blueviolet; position:relative; left:50px; top:50px; } ``` ``` ![](https://img.kancloud.cn/25/6b/256b0ddc62a748ca50c92c26bc34526d_414x311.png) **設置relative的div不會影響其他div的位置，且top和left是相對于它原本自身的位置來定位。**