采用CSS定位属性实现Html中DIV层叠与悬浮

要实现HTML中DIV层叠与悬浮，需要使用CSS定位属性。这里有两种常用的方法：

方法一：使用position属性

1. 为父元素设置 position: relative;，这可以使子元素相对于父元素定位。
2. 对要悬浮的子元素，设置 position: absolute;，这会使元素从文档流中脱离，可以自由地定位。
3. 使用 top 或 bottom 和 left 或 right 属性来定义子元素的位置。
4. 可以使用 z-index 属性来设置层叠顺序，数字越大的元素会显示在数字小的元素上面。

<div class="parent">
  <div class="child child1">我是第一个子元素</div>
  <div class="child child2">我是第二个子元素</div>  
</div>

.parent {
  position: relative;
  height: 200px;
  width: 200px;
  background-color: #eee;
}

.child {
  position: absolute;
  height: 100px;
  width: 100px;
  border: 1px solid black;
  text-align: center;
  line-height: 100px;
}

.child1 {
  top: 0;
  left: 0;
  background-color: #F44336;
  z-index: 1;
}

.child2 {
  bottom: 0;
  right: 0;
  background-color: #2196F3;
}

方法二：使用float属性

1. 设置悬浮元素为 float: left; 或 float: right;
2. 父元素的高度应该为非自适应值(如：px)，否则可能出现因高度自适应导致一些元素无法居中的情况。

<div class="parent">
  <div class="child child1">我是第一个子元素</div>
  <div class="child child2">我是第二个子元素</div>  
</div>

.parent {
  background-color: #eee;
  height: 200px;
  overflow: hidden;
}

.child {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  text-align: center;
  line-height: 100px;
}

.child1 {
  float: left;
  background-color: #F44336;
}

.child2 {
  float: right;
  background-color: #2196F3;
}

以上就是使用CSS定位属性实现HTML中DIV层叠与悬浮的方法。请根据实际需求选择合适的方法。