固定定位的元素可以应用边距吗？

Question

固定定位的元素可以应用边距吗？

3

我想要将div设置为固定位置。但是当我这样做时，它会将H1向上移动，所以我尝试给它一个margin-bottom。然而，这并没有起作用。在我的情况下，我只想修改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>

- sopanha

1

固定元素不像普通项目那样参与从上到下的元素流，因此不使用margin。 - Dutchie432

@Dutchie432，那么我要如何将H1下移而不修改H1呢？ - sopanha

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dutchie432 · Accepted Answer

一个固定的元素不像普通的元素一样属于正常的自上而下的元素流，因此不能使用margin。您需要为其他元素添加margin以允许固定元素的间距。

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/