css中实现Android relativeLayout的效果

效果:删除按钮在背景图的上层

<div class="parrent">
      <img class="parrent_img"/> //背景图
      <img class="parrent_dele" src="../img/delete.png"/> //删除按钮
</div>

CSS:

.parrent {
  width: 100px;
  height: 100px;
  margin-right: 10px;
 //
父元素增加这个属性, 子元素parrent_dele如果也设置了position这个属性,那么parrent_dele这个子元素就会找和它最近的节点进行绝对定位.
  position: relative; 
}
.parrent_img {
  width: 100%;
  height: 100%;
}

.parrent_dele {
  width: 20px;
  height: 20px;
  position: absolute; //子元素设置这个属性,使得删除按钮在背景图得上层
  top: 5px;
  right: 5px;
}

 

posted @ 2020-12-18 17:10  野生野鸡码农  阅读(161)  评论(0编辑  收藏  举报