小提琴在这里: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下? (这意味着我可以在红色区块上看到黑色区块,但是红色区块没有被白色区块覆盖)?