html让层悬浮

6 篇文章 0 订阅

1.悬浮在最上层 

 <div style="position:fixed;width:960px;height:30px;text-align:center;top:0px">HTML让层悬浮</div>

传说中的悬浮术

2.悬浮在最右侧  

<div id="uu" style="width:400px; z-index:100; position:fixed; right:20px;top:100px; float:right; background:#eea; ">ee</div>


<div id="dg" style="z-index: 9999; position: fixed ! important; right: 0px; top: 0px;">
<table width=""100% style="position: absolute; width:260px; right: 0px; top: 0px;">
//table 嘻嘻嘻嘻嘻嘻嘻嘻 
</table>

 

div position参数设置为fixed 其相对于浏览器为绝对位置,通过设置right和top将div固定在右上角。

table position参数设置为absolute,其相对于第一层div绝对定位,通过设置right和top将table固定在div容器的右上角。

 

 

首先将position定义为,absolute、relative或fixed。 
【必须position为以上三个属性,z-index才能层级体现出来,才能起作用】 
设置 style 中 z-index:auto 
auto可定义为一个值(整数数字),越大代表越置前,如可定义为: z-index:9999。 
若定义为-1,代表为最底层。 
如果要让div1不被div2遮挡,则将div1的z-index设置比div2大就可以了
 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值