对同一个盒子同时设置相对定位和浮动或者绝对定位和浮动的问题

  • 作者:村长
  • 发布时间:2020-04-18 10:56
  • 分类:HTML+CSS
  • 标签: 热门推荐

可能细心的朋友在查看某些网页的时候发现,某些盒子或是图片既设置了相对定位又设置了浮动,觉得很奇怪,其实呢,这个设置是非常的正常。

   比如,在布局页面的时候,我希望导航和轮播图一左一右的进行显示,就可以对导航设置左浮动float。轮播图右浮动。但是呢、如果导航里面有些小图标之类的东西要进行绝对定位absolute操作时,那么就可以对该导航设置相对定位relative了,相当于小图标的已定位的祖先元素就是这个导航了,关键相对定位不会改变浮动属性,用起来也是非常方便的。

  

    另外就是浮动float和绝对定位absolute一起设置了,这个可不可以呢?答案是不可以的,因为对同一个盒子设置绝对定位和浮动时,绝对定位会使浮动属性失效,这时就可能产生各种奇葩bug了,所以当一个盒子已经进行了浮动,就不要再对其进行绝对定位了,选择的时候一定要注意。


  总结下:

   div{float :left;position:relative}这样是可以的

   div{float :left;position:absolute}不允许,绝对定位会使浮动失效


  • php程序员面试笔试宝典
琉忆编程库
加载中...
TOP