Z-index不适用于position:fixed

时间:2017-01-16 09:55:20

标签: javascript html css

小提琴在这里:https://jsfiddle.net/tnjkxvuj/6/

HTML:

<div style="background-color:white;">
     <div id="content" style="background-color:black;width:360px;height:640px">
                </div>
                <div id='oneadIRTag'></div>
                <div id="content" style="background-color:black;width:360px;height:640px">
     </div>
</div>
var onead_inread = document.getElementById('onead-inread');

var underlayContainer = document.createElement('div');
        // underlayContainer = curDoc.createElement('div');
        underlayContainer.setAttribute('id', 'containerDiv');
        // underlayContainer.classList.add('innity-apps-underlay-ad');
        underlayContainer.style.setProperty('width', '100%', 'important');
        underlayContainer.style.setProperty('position', 'relative', 'important');
        underlayContainer.style.setProperty('left', '0px', 'important');
        underlayContainer.style.setProperty('top', '0px', 'important');
        underlayContainer.style.setProperty('z-index', '1', 'important');
        underlayContainer.style.setProperty('transition', 'height 1s', 'important');
        underlayContainer.style.setProperty('-webkit-transition', 'height 1s', 'important');
        underlayContainer.style.setProperty('-moz-transition', 'height 1s', 'important');
        underlayContainer.style.setProperty('overflow', 'hidden', 'important');
        underlayContainer.style.setProperty('border', 'none', 'important');
        underlayContainer.style.setProperty('padding', '0', 'important');
        underlayContainer.style.setProperty('margin', '0', 'important');
        underlayContainer.style.setProperty('text-align', 'left', 'important');
        underlayContainer.style.setProperty('height','732px','important');

var fixedContainer = document.createElement('div');
        fixedContainer.setAttribute('id', 'fixedContainer');
        fixedContainer.style.setProperty('width', '100%', 'important');
        fixedContainer.style.setProperty('position', 'fixed', 'important');
        fixedContainer.style.setProperty('left', '0px', 'important');
        fixedContainer.style.setProperty('top', '0px', 'important');
        fixedContainer.style.setProperty('z-index', '0', 'important');
        fixedContainer.style.setProperty('pointer-events', 'none', 'important');
       //fixedContainer.style.setProperty('-webkit-backface-visibility', 'hidden','important');
        fixedContainer.style.setProperty('height','732px','important');






var fallbackImgEl = document.createElement('div');
        fallbackImgEl.setAttribute('id', 'onead_video');
        //fallbackImgEl.src = mvpVideoSrc;
        fallbackImgEl.style.setProperty('background-color','red','important');
        fallbackImgEl.style.setProperty('width', '100%', 'important');
        fallbackImgEl.style.setProperty('height', 'auto', 'important');
        fallbackImgEl.style.setProperty('position', 'absolute', 'important');
        fallbackImgEl.style.setProperty('margin-left', 'auto', 'important');
        fallbackImgEl.style.setProperty('border', 'none', 'important');
        fallbackImgEl.style.setProperty('z-index','-1');
        fallbackImgEl.style.setProperty('height','640px','important');

        fixedContainer.appendChild(fallbackImgEl);
        underlayContainer.appendChild(fixedContainer);
        onead_inread.parentNode.insertBefore(underlayContainer, onead_inread);

我试图研究很多关于position : fixed的问题,但他们还没有解决我的问题。

如何在oneadIRTag中编辑元素以将underContainer置于underlayContainer下? (这意味着我可以在红色区块上看到黑色区块,但是红色区块没有被白色区块覆盖)?

0 个答案:

没有答案