绝对定位按钮未定位在其父DIV中

时间:2011-11-18 14:43:45

标签: html css

在下面的代码中,我将输入按钮添加到leftPane div。
这里我有两个div /左80%和右20% 现在我想将此按钮垂直放置在leftPane的中间和右侧 但是当我设置'正确:0;'时它会进入浏览器的右侧,而不是左侧的右侧 为什么呢?

<body style="overflow:hidden;">

        <div  style="background: #ff0000; position: fixed; top:0; left:0; width:100%; height:100%;">
            <div id="leftPage" style="width:80%; height:100%;background:#00ff00; float:left;text-align:center;">
                <img src="http://fc07.deviantart.net/fs45/f/2009/106/c/1/HD_Nature_Wallpapers_by_CurtiXs.jpg" alt="test" style="max-width:90%; max-height:90%;"/>
                <input type="submit" value="Next" style="width:40px;height:70px;position:absolute;top:50%;right:0;"/>
            </div>
            <div id="rightPane" style="width:20%; height:100%;background:#0000ff; float:left;">
                <div id="commentBox" style="background:#dddddd; width:90%; height: 50px;">
                    <input type="text" placeholder="Enter here..." />
                </div>
            </div>
        </div>
</body>

1 个答案:

答案 0 :(得分:7)

您需要拥有父<div style="position: relative;">,否则您的绝对定位将默认为<body>

澄清一下,将#leftPage设置为相对定位。