Question

这有点令人困惑，但我会试一试。基本上，我在一个页面上有3个'主'div。第一个是导航栏，第二个是搜索框，第三个是内容框。

我希望他们成为另一个，所以navbar＆gt;搜索框＆gt;内容框。我遇到的问题是，当我将margin-top: 10px;设置为内容框时，它会直接位于导航栏下方，而不是搜索框。它似乎忽略了搜索框，我无法为生活找出原因。我对这一切都很陌生，所以如果这是一个新手的错误，请耐心等待。

谢谢！

<body>

<div id="navbar">
        <img class="navbar" src="images/homebutton.png" />
        <img class="navbar" src="images/e-3button.png" />
        <img class="navbar" src="images/resignedbutton.png" />
        <img class="navbar" src="images/firedbutton.png" />
        <img class="navbar" src="images/desertersbutton.png" />
        <img class="navbar" src="images/mosrosterbutton.png" />
        <img src="images/divider.png" />
        <p><script language="JavaScript">dT();</script></p>
</div>

<div id="search">
    <img src="images/logo.png" />
        <b><p>Search</p></b>
        <form action="" id="search_habbo">            
            <input type="text" name="habbo_name" id="habbo_name" size="30" required>
            <br>
            <input type="submit" value="Search" name="send" id="send">
        </form>
    <div id="search_results">
        <div id="loadingimage">
            <img src="images/ajax-loader.gif" />
        </div>
    </div>
</div>
<div id="content">

</div>
</body>

#navbar {
    background: url(images/navbarbg.png);
    width: 100%;
    height: 55px;
    line-height: 20px;
    margin: 0;
    white-space: nowrap;
    display: inline-block;
}

#search {
    display: block;
    width: 920px;
    height: auto;
    background: #fff;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    padding: 5px;
    position: absolute;
    top: 65px;
    left: 50%;
    margin-left: -462px;
    border-top-left-radius: 5px 5px;
    border-top-right-radius: 5px 5px;
    border-bottom-left-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
    -moz-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
    -webkit-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
    box-shadow:0px 0px 2px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
}



 #content {
        width: 920px;
        height: auto;
        margin-top: 10px;
        background: #fff;
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
        padding: 5px;
        position: absolute;
        left: 50%;
        margin-left: -462px;
        border-top-left-radius: 5px 5px;
        border-top-right-radius: 5px 5px;
        border-bottom-left-radius: 5px 5px;
        border-bottom-right-radius: 5px 5px;
        -moz-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
        -webkit-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
        box-shadow:0px 0px 2px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
    }

Answer 1

它忽略了搜索框，因为你有#content

postion: absolute;

将其更改为

position: relative;

或添加类似

的内容

top: 40px;

Answer 2

如果你只想把它们放在另一个上面，那么删除这些代码行：

＃搜寻

position: absolute;
top: 65px;
left: 50%;

＃内容

position: absolute;
left: 50%;

另外，为什么这些：

margin-left: -462px;

删除那些

Answer 3

确实，绝对定位是问题 - 我倾向于避免它用于所有一般定位。

看看这个链接，它有一些非常方便的定位框示例 - 我仍然参考它。

https://developer.mozilla.org/samples/cssref/css-positioning.html

HTML div忽略了margin-bottom的div

3 个答案: