固定定位与外边距重叠_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:32:34
Original
1136 people have browsed it

关于Fixed固定定位的问题,之前没有认真了解过,外边距重叠和还会和固定定位有关系,重叠关系没搞清会直接影响到Body的位置!

讲的挺好,以前只知道fixed定位是相对浏览器视口的,听后才理解了,只有设置偏移量后,fixed定位元素才以浏览器视口定位

1.由于给top选择器设置fixed固定定位时,(top层已经脱离了标准文档流)没有对其设置偏移量,以其父包裹层定位,(当top选择器fixed固定定位设置了偏移量时,则top层的位置按照所设置的偏移量的位置定位),而其父包裹层body的margin与mainbody的上margin值发生了重叠,(此时的body与mainbody属于标准文档流)mainbody的上margin值大于body的margin值,选择了mainbody的上margin值20px(标准文档流中上下margin发生重叠时选择margin值大的那个)所以body下移20px;top层又以body层定位,从而导致了top层与浏览器可视窗口产生了距离。为了保持top层与浏览器窗口紧挨着,则需对top层的固定定位设置偏移量top:0;

2.第一步对top层设置偏移量后top层紧随其后的兄弟元素会占据其原来的位置,所以mainbody层上移占据原来top层的位置。导致原来top层与mainbody层20px的间距没有了。在mainbody层的上外填充加上一定的高度就可以解决了。

http://www.imooc.com/qadetail/66633

在垂直方向上,margin-top值存在重叠----也就是外边距合并:当两个垂直外边距相遇时会发生外边距合并,合并后的外边距的高度等于两个外边距中较大的外边距值。这只发生在普通文档流中的块级框中,而行框、绝对定位以及浮动则不会出现。所以一般建议在父级元素里加margin,在子级元素里用padding。

外边距的问题上,有时候老子还要听儿子的才行啊,哈哈

http://www.imooc.com/qadetail/66633

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!