Position DIV 根据屏幕分辨率

Question

我正在尝试为我的网站创建导览，但在定位内容 div 时遇到了问题。 无论屏幕分辨率如何，我都需要让它出现在同一个地方。 看一下这两个图像。 图 1 在正确的位置显示了内容 div，但在图 2 中我的笔记本电脑上却没有。 它需要位于书签链接下。 这是代码：

 window.onload = function(){ const guidePosition = [ {top: 40, left: 1290}, {top: 190, left: 160}, {top: 230, left: 390}, {top: 360, left: 520}, {top: 120, left: 720}, {top: 55, left: 800} ] const bodyTextEle = document.getElementById('guideBodyText'); const contentEle = document.getElementById('guideContent'); const stepLiEle = document.getElementsByClassName('dot'); let currentStepIndex = -1; const stepLength = guidePosition.length; changeStep(); document.getElementById("guideNextBtn").addEventListener('click', ()=>{ changeStep('next'); },false ); document.getElementById("guidePrevBtn").addEventListener('click', ()=>{ changeStep('prev'); }, false ); document.getElementById('closeBtn').addEventListener('click', ()=>{ document.getElementById('guidedTour').style.display = 'none'; },false ); function changeStep(direction){ if((direction === 'prev' && currentStepIndex === 0) || (direction === 'next' && currentStepIndex === stepLength-1)){ document.getElementById('guidedTour').style.display = 'none'; }else{ let eraseDotIndex; if(direction === 'prev'){ currentStepIndex = currentStepIndex - 1; eraseDotIndex = currentStepIndex === stepLength-1? 0: currentStepIndex +1; }else{ currentStepIndex = currentStepIndex + 1; eraseDotIndex = currentStepIndex === 0? stepLength -1: currentStepIndex -1; } bodyTextEle.style.marginLeft = `${-360*currentStepIndex}px`; //bodyTextEle.style.left = `${-360*currentStepIndex}px`; stepLiEle[eraseDotIndex].setAttribute('data-step', ''); // erase number stepLiEle[currentStepIndex].setAttribute('data-step', currentStepIndex+1); // add number stepLiEle[eraseDotIndex].classList.remove('active'); // remove dot active stepLiEle[currentStepIndex].classList.add('active'); // add dot active var xTop = guidePosition[currentStepIndex].top + 'px' var xLeft = guidePosition[currentStepIndex].left + 'px' contentEle.style.top = xTop; contentEle.style.left = xLeft; } } }

 button { outline: none; } li { list-style: none; } a, button { cursor: pointer; }.fb_gd_wrap.mask { position: fixed; top: 0; left: 0; //right: 0; //bottom: 0; background: rgba(0, 0, 0, .3); z-index: 0; height: 100%; width: 100% }.fb_gd_wrap.content { height: 200px; background: transparent; z-index: 99999; filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.4)); position: absolute; left: 0px; }.fb_gd_wrap.content::after { /* this is the triangle callout pointer */ content: ""; display: block; position: absolute; /* left top */ //top: 25px; //left: -30px; //border: 15px solid #eee; /* left bottom */ //top: 120px; //left: -30px; //border: 15px solid #eee; /* top left */ //top: -30px; //left: 25px; //transform: rotate(90deg); //border: 15px solid #eee; /* top right */ top: -30px; left: 325px; transform: rotate(90deg); border: 15px solid #eee; /* right top */ //top: 25px; //left: 400px; //transform: rotate(180deg); //border: 15px solid #eee; /* right bottom */ //top: 120px; //left: 400px; //transform: rotate(180deg); //border: 15px solid #eee; /* bottom left */ //top: 200px; //left: 90px; //transform: rotate(-90deg); //border: 15px solid #333; /* bottom right */ //top: 200px; //left: 275px; //transform: rotate(-90deg); //border: 15px solid #333; border-bottom-color: transparent; border-top-color: transparent; border-left-color: transparent; }.fb_gd_wrap.header { height: 50px; line-height: 50px; background: #eee; position: relative; border-radius: 5px 5px 0 0; }.fb_gd_wrap.header.text { font-size: 2.5rem; font-weight: bold; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin-left: 1rem; color: #333; }.fb_gd_wrap.header.btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; border: none; background: transparent; color: #666; }.fb_gd_wrap.header.btn:hover { color: #000; }.fb_gd_wrap.body { height: 100px; background: #eee; }.fb_gd_wrap.body.text { font-size: .9rem; color: #000; overflow: hidden; width: 360px; margin: 0 20px; }.fb_gd_wrap.body.textList { padding: 0; margin: 0; width: 10000px; font-size: 0; margin-left: 0; transition: all.5s; }.fb_gd_wrap.body.textList p { display: inline-block; font-size: 14px; width: 360px; padding: 0; vertical-align: top; }.fb_gd_wrap.footer { height: 50px; background: #5893d8; border-radius: 0 0 5px 5px; font-size: 0; }.fb_gd_wrap.footer.btn { display: inline-block; width: 80px; border: none; height: 100%; padding: 0; font-size: 16px; vertical-align: top; color: #fff; background: transparent; }.fb_gd_wrap.footer.btn:hover { color: #666; }.fb_gd_wrap.footer.steps { display: inline-block; width: 240px; background: #333333; height: 100%; margin: 0; padding: 0; text-align: center; }.fb_gd_wrap.footer.dot { width: 8px; height: 8px; background: transparent; border: 1px solid #666; margin: 30px 12px 12px 12px; display: inline-block; border-radius: 50%; position: relative; }.fb_gd_wrap.footer.line::after { content: ""; display: block; background: #666; width: 24px; border-top: 1px solid #666; position: absolute; top: 4px; left: 9px; }.fb_gd_wrap.footer.dot::before { content: attr(data-step); display: block; color: #fff; position: absolute; top: -20px; left: 1.2px; font-size: 10px; }.fb_gd_wrap.footer.active { background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.7); }

 <div class="fb_gd_wrap" id="guidedTour"> <div class="content" id="guideContent"> <div class="header"> <span class="text"><i class="fa fa-binoculars"></i>&nbsp;Guided Tour</span> <button class="btn" id="closeBtn"><i class="far fa-times-circle"></i></button> </div> <div class="body"> <div class="text"> <div id="guideBodyText" class="textList"> <p>1: You can create bookmarks for all you favorite screens. You can even bookmark individual records, such as a particular deal number.</p> <p>2: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</p> <p>3: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</p> <p>4: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</p> <p>5: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</p> <p>6: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</p> </div> </div> </div> <div class="footer"> <button id="guidePrevBtn" class="btn prev">previous</button> <ul class="steps"> <li class="dot line active"></li> <li class="dot line "></li> <li class="dot line "></li> <li class="dot line "></li> <li class="dot line "></li> <li class="dot "></li> </ul> <button id="guideNextBtn" class="btn next">next</button> </div> </div> </div>

Answer 1

最可靠（和非javascript）的方法是使id为guidedTour的div成为书签div的子元素。 Add position:relative to the style of the bookmark div and then use position:absolute, top and left css properties to position the arrow of the guidedTour div under the bookmarks div. 使用 z-index 确保弹出窗口出现在父元素上方。

如果没有 html 的 rest，则无法具体向您展示如何执行此操作，但这里有一个示例