Position:fixed relative absolute

fixed:绝对定位,相对于浏览器窗口;left right top bottom z-index;
 e.g. 简单弹出框
    ①div_bg {
            position:fixed;
            width:100%;
            height:100%;
            background-color:#666666;
            opacity:0.5;
            z-index:1;
        } //背景
    ②div{
            position:fixed;
            width:388px;height:388px;
            left:0;right:0;top:0;bottom:0;
            margin:auto;
            z-index:1;    
        }//左右上下、不同分辨率下居中显示


relative:相对定位,相对于自身static位置;left right top bottom z-index;
 absolute:绝对定位,相对于第一个非static的父级元素;left right top bottom z-index;  
 
e.g.
    <div style="position:relative;width:188px;height:288px;border:1px solid #666666">
        <div style="position:relative;left:18px;top:18px:width:88px;height:88px;border:1px solid red">A</div>
        <div style="width:border:1px solid #666666">
            <div style="position:absolute;left:8px;top:8px:width:88px;height:88px;border:1px solid #666666">B</div>
        </div>
    </div> 
以上运行有图如下:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值