Question

在下面的HTML中，文本输入和按钮应该从顶部定位380px，但它位于页面的下方。我注意到如果我移除它位于正确位置或靠近它的图像，我还没有拔出标尺。为什么会发生这种情况？如何解决？

<div style="position:relative;width:800px;height:792px;font-family:Arial;font-size:12px;margin:0 auto;left:8px;top:14px;background-color:#FFFFFF;">
    <img name="Image712" src="https://www.google.com/images/srpr/logo4w.png" style="position:relative;display:block;margin:0 auto;top:217px;width:269px;height:95px;" />
    <div name="HGroup714" style="position:relative;display:block;margin:0 auto;top:380px;width:220px;height:23px;">
        <div style="display:inline-block;padding-right:2px">
            <input name="Button715" type="button" style="position:relative;vertical-align:middle;width:101px;height:21px;font-family:Arial;font-size:12px;" class="buttonSkin" value="Google Search" />
        </div>
        <div style="display:inline-block;">
            <input name="Button718" type="button" style="position:relative;vertical-align:middle;width:113px;height:21px;font-family:Arial;font-size:12px;" class="buttonSkin" value="I'm Feeling Lucky" />
        </div>
    </div>
    <input name="TextInput721" type="input" style="position:relative;display:block;margin:0 auto;top:330px;width:50%;height:22px;font-family:Arial;font-size:12px;padding:0;border:1px solid #696969;" />
</div>


<style>
    *,
    *: before, *: after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
</style>

<style>
    *,
    *: before, *: after {
        outline: 1px dotted red;
    }
</style>

更新：我知道它是内联CSS。请暂时忽略它。

链接到直播example（感谢Alien先生）。

Answer 1

您希望使用绝对位置，而不是使用相对位置（将相对位置放置在应该渲染的位置）。绝对是相对于它的父级渲染的，这正是你实际需要的东西。

固定位置与绝对相同，除了“父”是浏览器窗口。

我认为这正是您所寻找的：http://jsfiddle.net/fr6AY/1/

position:absolute;
margin:0 auto;
left: 0;
right: 0;

Answer 2

问题在于，由于图像是相对定位的元素，'top'css标签应用于'HGroup714; element来自此图像的底部，因此图像的高度将其向下移动到页面。如果您希望这不会影响下部元素的位置，您只需从Hgroup元素的“顶部”标记中删除图像的95px高度。

任何相对定位都会导致元素相对于彼此定位，因此您可以使用position：absolute从页面流中取出它们，并从父元素中删除任何相对定位。

使用位置的建议：固定;只有当页面永远不会被滚动时才会起作用 - 固定定位将其固定在浏览器窗口中，滚动使其保持在同一位置，而绝对不依赖于其他元素的位置，而是保持它在页面中的位置。

Answer 3

如果您想从窗口顶部（不是页面）获得380px，那么您正在寻找position: fixed。

如果您希望从页面顶部获得380px，请尝试使用position: absolute元素中的HGroup714。

如何防止HTML元素被压下页面

3 个答案: