html 属性位置向上移动,css解决使用固定定位导致下方元素上移到固定定位元素的位置...

问题描述

固定定位相对于视口定位，如果上方有一个div元素，开启固定定位以后，这个div就会脱离文档流(“漂浮走了”)，那么原来的这个div所占据的位置，就会空出来，就会导致下方的div元素蹿升上来。就会导致布局的紊乱。解决方式其实很简单，再加一个div占据住 开启固定定位的元素的位置。这个div可以是兄弟div(在下面加)，也可以是父级div(再套一层)。但是新加的占位的div宽高必须要和开启固定定位的元素的宽高一致。这样看这才正常。

Document

.top{

width: 100%;

height: 80px;

background-color: #baf;

position: fixed;

}

.bottom {

width: 100%;

height: 100px;

background-color: #faf;

}

.fatherDiv {

width: 100%;

height: 80px;

}

.brotherDiv {

width: 100%;

height: 80px;

}

总结

上述解决方式其实很简单。其实还有一个思路(不过是错的)，就是做一个js的监听浏览器滚动条的事件，当浏览器滚动的时候，让div固定定位，一开始不开启定位，在浏览器停下来的时候，取消固定定位。貌似是解决问题了。不过先不说使用js耗费性能，监听浏览器滚动的时候倒是好办。不过判断浏览器何时滚动停下倒是麻烦，再者如果浏览器滚动停下了，取消固定定位，就会失去滚动的效果，等。这个方式，我自己试了试，非常麻烦而且解决不了问题。所以最优解就是使用上述中的方式一。