position設置為absolute和fixed都會使元素脫離標准流（設置浮動也會使元素脫離標准流），大多數情況下我們不需要考慮因為設置position屬性而導致的脫離標准流后引發的問題，但是當頁面上面的導航欄使用了position:fixed;屬性（如下圖所示）之后我們就不得不考慮這個問題了。
如果我們不去解決position:fixed;引發的問題，那么下面的圖片初始加載出來時就會位於任務欄的下方（如下圖所示）
那么我們要如何解決這個問題呢？
代碼：
<style> .one { position: fixed; width: 800px; height: 100px; border: 1px solid #ccc; background-color: pink; } .two { width: 1000px; height: 200px; background-color: blueviolet; } </style> </head> <body> <div class="one"></div> <div class="two"></div> </body>
顯示：
一共有三種方法
方法一：在設置了position:fixed;的盒子外面再套一個盒子，且高度與設置此屬性的盒子一致
代碼：
<style> .zero { width: 800px; height: 100px; background-color: purple; border: 1px solid #ccc; } .one { position: fixed; width: 800px; height: 100px; border: 1px solid #ccc; background-color: pink; } .two { width: 1000px; height: 200px; background-color: blueviolet; } </style> </head> <body> <div class="zero"> <div class="one"></div> </div> <div class="two"></div> </body>
顯示：
方法二：在設置了該屬性盒子同級下再添加一個盒子，並設置高度與此盒子的高度相同
代碼：
<style> .one { position: fixed; width: 800px; height: 100px; border: 1px solid #ccc; background-color: pink; } .half { height: 100px; background-color: brown; } .two { width: 1000px; height: 200px; background-color: blueviolet; } </style> </head> <body> <div class="one"></div> <div class="half"></div> <div class="two"></div> </body>
效果：
方法三：給下面的盒子設置margin-top:mpx;m為設置了position:fixed;盒子的高度。但是該方法可能會導致一個問題-外邊距塌陷問題。因此對於某些情況而言，采用此方法是我們同時還要考慮外邊距塌陷的問題。