[随手记]2014前端面试题解

1.去哪儿网

   div1和div2是DOM结构中的关系为兄弟节点的两个div元素，分别画出下列问题的效果图：

   a.   .div1 {width: 100px;height: 100px;position: absolute;float: left;} 

         .div2 {width: 100px;height: 100px;position: absolute;float: right;}

　b.   .div1 {width: 100px;height: 100px;position: relative;float: left;} 

         .div2 {width: 100px;height: 100px;position: relative;float: right;}

   c.   .div1 {width: 100px;height: 100px;position: absolute;float: right;} 

         .div2 {width: 100px;height: 100px;position: relative;float: left;}

　　这道题主要考的是对position属性和float浮动属性的了解。当position定位方式为absolute时，float失效，元素会自动定位到top:0px;left:0px;即左上角，并且后出现的兄弟元素div2会自动浮在div1上。而当position设为relative时，相对布局起作用，float才会作用，所以b中应该是两者分开，div1在左、div2在右。最后一个答案是div2浮在div1上层、都在父元素的左上角。