logo标签列表

绝对定位的按钮没有在其父级DIV中定位。

htmlcss
3
在下面的代码中，我在leftPane div中添加了一个输入按钮。
这里有两个div，左边80%，右边20%。
现在我想把这个按钮垂直居中并放在leftPane的右侧。
但是当我设置“right:0;”时，它会移到浏览器的右侧，而不是leftPane的右侧。
为什么？
<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个回答
7

如果没有父级元素<div style="position: relative;">，那么绝对定位的默认元素是<body>。

为了澄清问题，请将#leftPage设置为相对定位。

2
实际上，一个 absolute 定位的元素的位置将相对于第一个具有 position 属性而不是 static（因此不仅仅是 relative）的父元素进行计算 - 这被称为包含块。如果没有这样的父元素，则将相对于 body 进行计算。在 OP 的情况下，有一个 position: fixed 的 div，它当然是 100%，所以“视觉上”与 body 相同，但并非使用 body 进行计算。 - kapa
在Dev.Opera上有一篇关于这个主题的好文章：http://dev.opera.com/articles/view/37-css-absolute-and-fixed-positioning/#containingblocks - kapa
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接