1. 程式人生 > >關於對同一個盒子同時設定相對定位和浮動或者絕對定位和浮動的問題

關於對同一個盒子同時設定相對定位和浮動或者絕對定位和浮動的問題

      可能細心的朋友在檢視某些網頁的時候發現,某些盒子或是圖片既設定了相對定位又設定了浮動,覺得很奇怪,其實呢,這個設定是非常的正常。

   比如,在佈局頁面的時候,我希望導航和輪播圖一左一右的進行顯示,就可以對導航設定左浮動float。輪播圖右浮動。但是呢、如果導航裡面有些小圖示之類的東西要進行絕對定位absolute操作時,那麼就可以對該導航設定相對定位relative了,相當於小圖示的已定位的祖先元素就是這個導航了,關鍵相對定位不會改變浮動屬性,用起來也是非常方便的。

    另外就是浮動float和絕對定位absolute一起設定了,這個可不可以呢?答案是不可以的,因為對同一個盒子設定絕對定位和浮動時,絕對定位會使浮動屬性失效,這時就可能產生各種奇葩bug了,所以當一個盒子已經進行了浮動,就不要再對其進行絕對定位了,選擇的時候一定要注意。

  總結下:

   div{float :left;position:relative}這樣是可以的

   div{float :left;position:absolute}不允許,絕對定位會使浮動失效

    再來一個去哪兒前端面試的題目:

    div寬度為100px,邊框為1px,div1、div2為兄弟元素,要求分別畫出以下三種情況中二者的在頁面中的表現
a) .div1{position:absolute;float:left} .div2{position:absolute;float:right}
b) .div1{postition:relative;float:left} .div2{position:relative;float:right}
c) .div1{position:absolute;float:right} .div2{position:relative;float:left}

     效果圖如下: