Question

我想将固定位置设为div。当我这样做时，它会向上移动H1，所以我试着给它一个底部。但是，它不起作用。在我的情况下，我只想修改div而不是h1，因为我有很多页面，所以我想在div上进行修改，并且可以在每个页面上工作。谢谢，任何答案都表示赞赏。

<html>
<head>
<style>                 
    div{
        width:100%;
        height:70px;
        background-color: green;
        position: fixed;
        top:0;
        margin-bottom:70px; /*not working*/
    }
    h1{
        /*margin-top:70px;*/ 
    }
</style>
</head>
<body>
    <div></div>
    <h1>Hello world</h1>
</body>
</html>

Answer 1

固定元素不像正常项目那样是普通自上而下元素流的一部分，因此不使用边距。您需要为其他元素添加边距以允许固定项目的间距。

h1{margin-top:140px;}

JSFiddle：http://jsfiddle.net/sUJqx/1/

更好的解决方案是将其余内容放入包装器并在其上放置边距。

<强> CSS

#header{
    width:100%;
    height:70px;
    background-color: green;
    position: fixed;
    top:0;
}
#wrapper{margin-top:140px;}

<强> HTML

<div id="header"></div>
<div id="wrapper">
    <h1>Hello world</h1>
    test 123
</div>

JSFiddle 2：http://jsfiddle.net/sUJqx/3/

我不能将保证金应用于固定头寸的元素吗？

1 个答案: