最顶层 '固定' 位置的div与非位置的div移动

考虑下面的代码：最顶层 '固定' 位置的div与非位置的div移动

div { 
 
    width:100%; 
 
    height:64px; 
 
    border:1px solid #000; 
 
} 
 

 
.top-fixed { 
 
    position:fixed; 
 
} 
 

 
.middle-fixed { 
 
    position:fixed; 
 
    top:64px; 
 
} 
 

 
.bottom { 
 
    margin-top:128px; #64+64 
 
}

<html> 
 
    <head></head> 
 
    <body> 
 
     <div class="top-fixed">Top Fixed</div> 
 
     <div class="middle-fixed">Middle Fixed</div> 
 
     <div class="bottom">Bottom</div> 
 
    </body> 
 
</html>

对于div.bottom中，我使用的margin-top属性，以便它不重叠与最顶级的股利。但它也带来了div.top-fixed'down'（参见小提琴）。

我该如何纠正它？有一种方法可能是使用div.bottom的padding-top属性代替margin-top，但这听起来并不优雅。

来源

2012-12-22 WeaklyTyped

这是一个类似的问题，回答为什么：http://stackoverflow.com/questions/38679945/why-do-non-positioned-non-child-divs-move-fixed-headers – steviejay

更改您的.bottom元素的CSS：

.bottom { 
    position:relative; 
    top:128px; #64+64 
}

来源

2012-12-22 08:23:27

你在上面固定股利错过了顶部0。

试试这个

.top-fixed { 
    position:fixed; 
    top:0; 
}

来源

2012-12-22 08:24:25

添加top:0;您.TOP固定类。

来源

2012-12-22 08:31:09

最顶层 '固定' 位置的div与非位置的div移动

回答

相关问题