z-index不起作用的大坑

2019-5-18 釋然 前端及開發文章及欣賞

如果您想訂閱本博客內容-_-亿贝平台登录地址,每天自動發到您的郵箱中|_陪葬品钥匙, 請點這裏

今天遇到的就是z-index不起作用的問題-||18167期胜负彩冷热。一個後台小哥不知道抽什麼瘋--|色群qq,寫元素覆蓋偏不讓用absolute---滤菌器,搞的我之後廢了9牛二虎之力寫了一下_-英优儿,問題描述是這樣的|360彩票网官网大乐透,

 一對兄弟節點,insert和parent|-|360彩票网官网大乐透,parent有兩個子節點subtop和subbottom|-仲傅账号注册,展現的結果是想讓subtop在insert上麵|_-洛克王国潘多许愿蛋,subbottom在insert下麵_-歌手高林生,

代碼如下何再贵:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .insert{
            position: relative;
            z-index:100;
            background: green;
            width:300px;
            height:300px;
            top:100px;
        }
        .parent{
            /*position:relative;
            z-index: 1000;*/
            width:200px;
            height:200px;
            /*left:0;
            top:-50px;*/
            border:1px solid #eee;
        }
        .subbottom{
            position:relative;
            z-index: 50;
            width:200px;
            height:200px;
            background: red;
            top:-100px;
            left:0;
 
        }
        .subtop{
            position: relative;
            z-index:1100;
            width:100px;
            height:100px;
            left:0;
            top:0;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="insert"></div>
    <div class="parent">
        <div class="subtop"></div>
        <div class="subbottom"></div>
    </div>
</body>
</html>

其實原理也很簡單|_|金条树,就是利用了z-index的覆蓋問題|-青海卫视下一站幸福,在寫的過程中我發現無論怎麼改變--永胜彩票网APP,insert的z-index總是無效的|易彩福地登录,於是百度了一下z-index無效的情況-|_5320xm软件,一共有三種||许宗衡简历:
1-注册送3868彩金、父標簽 position屬性為relative-__银行期票;

2_--注册送38元彩票、問題標簽無position屬性(不包括static)-_-手机qq2011通用版;

3-__青苹果家园系统、問題標簽含有浮動(float)屬性-|咸水湾。

這樣也很好理解為什麼parent設置了position和z-index之後insert的z-index就會失效的問題了-__38彩票软件,他的解決辦法有是三個||-小时代 快乐大本营:


1---双胞胎饲料价格、position:relative改為position:absolute|_后来 歌词;

2_|118彩票手机开奖、浮動元素添加position屬性(如relative__英伦国际彩票,absolute等)--_大学生个人自传;

3---青山光司、去除浮動-高效渗透剂。

所以|_盐城一中,去掉parent的position和z-index__wow暗月岛怎么去,達到了我想要的效果|_西安一号线,如下圖所示|陆童撒尿事件:

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司-||英国梧桐,為期望卓越的國內外企業提供卓越的UI界麵設計|宋祖德近况、BS界麵設計 |--谢霆锋张柏芝近况、 cs界麵設計 --_动感最划算、 ipad界麵設計 __118彩票app安卓版107、 包裝設計 -_-106在线彩票平台怎么样、 圖標定製 _永胜国际手机彩票游戏、 用戶體驗 -|-一级b成绩查询、交互設計|_报考省份的代码、網站建設 ||歌手2017第五期、平麵設計服務--出售桂花树。

標簽: z-index不起作用的大坑

分享到|__薇丝露: 新浪微博 騰訊微博 微信 微信 更多

Powered by emlog 京ICP備12006971號-1 sitemap