## 元素如何定位 **考察點** 1. position有哪些值及其作用 2. 文檔流和脫離文檔流的概念 3. 如何解決元素重疊 **回答** 1. position有4個值，分別是`static`，`relative`, `absolute`, `fixed`. 一般元素的默認值是`static`. `relative` 是相對定位，相對該元素本來應該在的位置偏移，偏移后可能和其他正常元素重疊，并且其原來所占空間不能被其他元素占用。 `absolute`是絕對定位， 相對于 static 定位以外（即relative，absolute和fixed）的第一個父元素進行定位。設置成absolute之后，元素將會脫離文檔布局，即該元素在頁面中并不占有位置，而是顯示在正常元素的上層或者下層。 `fixed`是相對瀏覽器視窗定位，頁面滾動時，`fixed`定位的元素相對瀏覽器視窗的位置始終不變。設置成fixed之后，元素將會脫離文檔布局，即該元素在頁面中并不占有位置，而是顯示在正常元素的上層或者下層。 2. 文檔流在文檔中元素排列時會占用位置，脫離文檔流在元素排列時并不占有位置。一般設置了`position: absolute`， `position: fixed`, `float: left`, `float: right`的元素為脫離文檔流，其余可顯示元素則為文檔流。 3. 設置`z-index`可以控制元素所在的層。 有趣的是，z-index:0時，非文檔流仍然顯示在文檔流的上層，但是z-index:-1時， 非文檔流顯示在文檔流的下層，因此可以得出結論， 文檔流并不是z-index為0 `relative`相對定位  `relative`在位置偏移中位置優先級`left`>`right`， `top`>`bottom`, 代碼證明 ```css .relative1{ position: relative; left: 20px; top: 20px; background-color: orange; width:300px; } .relative2{ position: relative; left: 20px; top: 20px; right: 20px; bottom: 20px; width:300px; background-color: orange; } .relative3{ position: relative; right: 20px; bottom: 20px; width:300px; background-color: orange; } .relative4{ position: relative; right: 20px; bottom: 20px; left: 20px; top: 20px; width:300px; background-color: orange; } ``` ```html <div style="background:green; "> <div>hello world</div> <div class="relative1">relative 1</div> <div>hello world</div> <div>hello world</div> <div class="relative2">relative 2</div> <div>hello world</div> <div>hello world</div> <div>hello world</div> <div class="relative3">relative 3</div> <div>hello world</div> <div>hello world</div> <div>hello world</div> <div class="relative4">relative 4</div> </div> ``` 結果：  詳細代碼： http://js.jirengu.com/sedij/3/ `absolute`絕對定位，top和bottom，left和right沒有優先級之分，設置之后會拉大元素的寬和高。 ```css .abs1{ position: absolute; left: 40px; top: 10px; background-color:red; } .abs2{ position: absolute; left: 40px; top: 10px; right: 40px; bottom: 10px; background-color:red; } ``` ```html <div style="background:green;height:100px;">正常文檔流, 這里沒有absolute的元素</div> <div style="background:blue;height:100px;"> 正常文檔流 <div class="abs1">absolute 1</div> </div> <div style="background:green;height:100px;position:relative"> 正常文檔流 <div class="abs1">absolute 1</div> </div> <div style="background:blue;height:100px;position:relative"> 正常文檔流 <div class="abs2">absolute 1</div> </div> ``` 結果  詳細代碼 http://js.jirengu.com/yezix/2/ `fixed`在位置偏移中位置優先級`left`>`right`， `top`>`bottom`, 代碼證明: ```css .fixed1{ background-color: red; width:100px; height: 100px; position: fixed; top: 10px; left: 50px; right: 50px; bottom: 50px; } ``` ```html <div style="width:100%;height:300px;background-color: green;"> <div class="fixed1"></div> </div> ```  詳細代碼 http://js.jirengu.com/biwuj/2/