Maison > interface Web > tutoriel HTML > 固定定位与外边距重叠_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 11:32:34
original
1239 Les gens l'ont consulté

关于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

 

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal