如何在具有相对位置的div内部使用绝对位置？

在下面的脚本中，我需要能够使用类.cnt在其div容器中使用绝对值来定位类.infobox坐标。

注意：如果可能的话，它应该在没有为类.cnt设置顶部位置的情况下工作。 单击向上/向下以查看.infobox

http://jsfiddle.net/pg52hsnc/

---

      #btn-up, #btn-down { position: absolute; top: 400px; } #btn-up { left: 0px; } #btn-down { left: 50px; } #btn-up, #btn-down { width: 50px; height: 50px; background-color: yellow; outline: 1px solid black; } #content-scroll-container { position: absolute; top: 0; left: 0px; width: 500px; height: 250px; /* MASK HEIGHT real mask would be 200*/ overflow: hidden; } #content-scroll-inner { position: absolute; } .cnt { height: 100px; width: 500px; background-color: red; } .cnt:nth-child(even) { height: 100px; background-color: pink; } .infobox { position:relative; top: 80px; height: 50px; width: 500px; background-color: cyan; display: none; }    var scroller = { config: { curPos: 0, // position el: 'content-scroll-container', // visible area (container) elInner: 'content-scroll-inner', // inner content cntPosY: null, // content top-left corner (0 position) cntHeight: null, // content lenght maskHeight: null, // visible area (rest is masked out) animationSpeed: 500, // jquery animation speed, use 0 for no animation isAnimationOn: false, // true when jquery is performing animation }, data: '
0
1
info 1
2
info 2
3
info 3
4
info 4
5
info 5
 empty
', getCntPosition: function () { // get y position of content var elm = document.getElementById(this.config.elInner); this.config.cntPosY = elm.offsetTop; }, getCntSize: function () { // get height for content var elm = document.getElementById(this.config.elInner); this.config.cntHeight = elm.clientHeight; }, getMaskSize: function () { // get height visible area var elm = document.getElementById(this.config.el); this.config.maskHeight = elm.clientHeight; }, updateData: function () { // refresh state this.getMaskSize(); this.getCntPosition(); this.getCntSize(); //console.clear(); console.log(this.config); }, logicShowHideArrows: function () { if (this.config.curPos = 4) { $('#btn-down').hide(); } else { $('#btn-down').show(); } }, showInfoBox: function (id) { this.config.isAnimationOn = true; var target = '#cnt-' + id + ' .infobox'; $(target).slideDown("slow", function () { this.config.isAnimationOn = false; }.bind(this)); }, hideInfoBox: function (id) { this.config.isAnimationOn = true; var target = '#cnt-' + id + ' .infobox'; $(target).slideUp("slow", function () { scroller.config.isAnimationOn = false; }); }, goUp: function () { if (this.config.curPos  0 && scroller.config.isAnimationOn == false) { scroller.config.isAnimationOn = true; if (this.config.curPos == 1) { scroller.hideInfoBox(this.config.curPos); $('#cnt-' + scroller.config.curPos).animate({ 'height': '-=50px' }, 500, function () { $('#content-scroll-inner').animate({ 'top': '+=50px' }, 500); scroller.logicShowHideArrows(); scroller.config.isAnimationOn = false; }); scroller.config.curPos--; this.config.incrementOf += 150; this.updateData(); } else { scroller.hideInfoBox(this.config.curPos); $('#cnt-' + scroller.config.curPos).animate({ 'height': '-=50px' }, 500, function () { $('#content-scroll-inner').animate({ 'top': '+=150px' }, 500); scroller.logicShowHideArrows(); scroller.config.isAnimationOn = false; }); scroller.config.curPos--; this.config.incrementOf += 150; this.updateData(); } } }, setEventHandler: function () { $('#btn-up').click(function () { scroller.goDown(); }); $('#btn-down').click(function () { scroller.goUp(); }); }, renderData: function () { // render data content to slide var elm = document.getElementById(this.config.elInner); elm.innerHTML = this.data; }, start: function () { this.renderData(); this.updateData(); this.setEventHandler(); this.logicShowHideArrows(); } };    
 
 
 
 
UP
 
DOWN
   

Answer 1

我能够使用以下代码解决我的问题。 我明确地在.cnt上添加position:relative

  .cnt { position: relative; height: 100px; width: 500px; background-color: red; } .infobox { position: absolute; top: 70px; height: 80px; width: 500px; background-color: cyan; display: none; }