前端定位方式 · 常用笔记

# 前端定位方式 ![](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是相对于它原本自身的位置来定位。**