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

(1)

方法:设置div样式 z-index:auto
auto可定义为一个值(整数数字),越大代表越置前,如可定义为: z-index:999。
前提是div是定位元素。
 
(2)可以使用float元素进行实现该效果。代码实例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
< 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"  οnclick="addNewstype()" >确定</button>
                          <button type="button" class="btn btn-round btn-default"  οnclick="clearButton()">重置</button>              
                      </form>
                      </div></div>
              </div>

 <div class="col-md-12" ></div>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值