html如何让其中一个div浮在另一个div上面

最新推荐文章于 2023-12-06 18:09:22 发布

jjjj首发式

最新推荐文章于 2023-12-06 18:09:22 发布

阅读量9.8k

点赞数 1

本文链接：https://blog.csdn.net/qq_44949838/article/details/89436957

版权

（1）

方法：设置div样式 z-index:auto
auto可定义为一个值(整数数字)，越大代表越置前，如可定义为： z-index:999。
前提是div是定位元素。

（2）可以使用float元素进行实现该效果。代码实例如下：

 
       < 
       html 
       > 
      
       < 
       body 
       > 
      
       < 
       style  
       type 
       = 
       "text/css" 
       > 
      
       .div1{ width: 200px; height: 100px; background: red; float: left; } 
      
       .div2{ width: 300px; height: 350px; background: yellow; } 
      
       </ 
       style 
       > 
      
       < 
       div  
       class 
       = 
       "div1" 
       ></ 
       div 
       > 
      
       < 
       div  
       class 
       = 
       "div2" 
       ></ 
       div 
       > 
      
       </ 
       body 
       > 
      
       </ 
       html 
       >

效果如下：

例子代码：

<div style="width:600px;height:300px;float:left; z-index:999;position:absolute;margin-left: 400px;">
<div class="col-lg-12">
<div class="form-panel">
<h4 class="mb"><i class="fa"></i> 修改新闻类别信息</h4>
<form class="form-horizontal style-form" method="post" id="newstypeForm" name="newstypeForm">
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">类型名称：</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="typename" name="typename">
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
</div>

<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">类型总量：</label>
<div class="col-sm-10">
<input class="form-control" id="disabledInput" type="text" placeholder="0" disabled>
</div>
</div>
<button type="button" class="btn btn-round btn-primary" "addNewstype()" >确定</button>
<button type="button" class="btn btn-round btn-default" "clearButton()">重置</button>
</form>
</div></div>
</div>