Question

我有一个固定的标题，我设置的z-index比正文内容更高，因此内容会在其下方滑动。为了将content div定位在固定标题下方，我设置了position:relative并给了top value

这似乎工作正常，直到我开始向content div添加项目。首先我添加了一个h1，当我尝试给它一点margin-top整个页面（标题和所有）向下移动我为margin-top指定的值。

我之前遇到过这种情况（崩溃div是吗？）我通常能够用设定的宽度或浮动或显示块修复它，但这些似乎都没有做到诀窍。

有人可以告诉我我错过了什么吗？

＆＃13;

*
{
    padding: 0;
    margin: 0;
}

header
{
    background-color: white;
    color: #724444;
    width: 100%;
    height: 90px;
    border-bottom: 1px solid rgba(140, 140, 140, .2);
    position: fixed;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    line-height: 1.3;
    z-index: 1000;
}

#header-fixedWidth
{
    width: 1000px;
    height: 90px;
    margin: 0 auto;
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px; 
    padding-right: 20px;
    box-sizing: border-box;
}

nav ul
{
    list-style: none;
    display: flex;
}

nav ul li
{
    margin: 0 10px;
}

#main-content
{
    width: 100%;
    min-height: 100px;
    position: relative;
    top: 89px;
}

#main-content-fixedWidth
{
    width: 1000px;
    min-height: 100px;
    margin: 0 auto;
    position: relative;
}



.headers
{
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-size: 30px;
    line-height: 1.3;
  margin-top: 20px;
}

#image-deck
{
    width: 1000px;
    border: 1px solid #ccc;
    position: relative;
    display: block;
}

/*Media Queries*/

@media (max-width: 1000px)
{
    header
    {
        width: 100%;
    }
    
    #header-fixedWidth
    {
        width: 100%;
    }
}

＆＃13;

<html>
    <head>
        <title>Pic Monkey Recreation</title>
        <link rel="stylesheet" href="style.css" />
        <meta name="viewport" content="width=device-width">
        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
    </head>
    <body>
        <header>
            <div id="header-fixedWidth"
                <img src="Images/logo.png" alt="randomLogo" id="randomLogo" />
                <nav>
                    <ul>
                        <li>
                            <img src="Images/iconMenu/edit.png" alt="">
                            <br>
                            <p>Edit</p>
                        </li>
                        <li>
                            <img src="Images/iconMenu/touchUps.png" alt="">
                            <br>
                            <p>Touch Up</p>
                        </li>
                        <li>
                            <img src="Images/iconMenu/design.png" alt="">
                            <br>
                            <p>Design</p>
                        </li>
                        <li>
                            <img src="Images/iconMenu/collage.png" alt="">
                            <br>
                            <p>Collage</p>
                        </li>
                    </ul>
                </nav>
                <div id="user-help">
                    <img src="Images/signIn.png" alt="signIn" id="signIn" />
                </div>
            </div>
        </header>
        <div id="main-content">
            <div id="main-content-fixedWidth">
                <div id="test">
                    <p class="headers">Here is a header for you to look at</p>
                </div>
                <div id="image-deck"></div>
            </div>
        </div>
    </body>
</html>

＆＃13;

Answer 1

您需要一个减去保证金的计数器来抵消您移动它的金额。因此，如果您的方框的最高值为50px，而您的内部h1的边距最高值为100px，则需要将您的方框顶值重置为-50px以进行计数。

相对定位分割中的边距移位

1 个答案: