CSS 同级元素position:fixed和margin

日期:2021-01-20 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

难题叙述

想用CSS完成顶部固定不动的实际效果:

尝试margin-top加position:fixed完成,编码以下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf⑻">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
  <style type="text/css">
      .header {
          position: fixed;
          height: 20px;
          width: 100%;
      }
      .content {
          margin-top: 30px;
      }
      .aside {
          float: left;
          width: 200px;
          background: orange;
      }
      .main {
          overflow: auto;
          background: yellow;
      }
  </style>
</head>
<body>
    <div class="header">123</div>
    <div class="content">
        <div class="aside">aside</div>
        <div class="main">main</div>
    </div>
</body>
</html>

結果header沒有精准定位在顶部,而是空出了content的margin-top间距:

依照position:fixed的界定,header早已摆脱文本文档流,应当不容易遭受content合理布局危害,但結果并不是这般。

难题研究

1.content的margin-top改成padding-top:可完成预期实际效果。
2.content另外设定margin-top和padding-top:仍会空出margin-top的间距。
3.body设定padding-top:会空出body的padding-top的间距,可完成预期实际效果。
4.body设定margin-top:会空出max(body->margin-top,content->margin-top)的间距。
5.给header设定top,如top: 0;:不会受到body和content的合理布局危害。

TBD:以后填补详尽的检测编码和实际效果图( ̄∇ ̄)...

总结

说到底是margin-top塌陷难题对position:fixed的危害。最先,针对position:fixed元素,假如不特定top,它在竖直方位上的参照原点是body盒实体模型的content的上界限。假如特定top,它在竖直方位上的参照原点才是大家常说的视窗(viewport)的上界限,left和水平方位同理。这里的参照原点是指fixed元素合理布局时的参照目标,1旦明确,就算网页页面被往下拉,body上界限上移,fixed元素部位也已不更改。其次,由于margin-top塌陷难题,设定content的margin-top后,body的content一部分会下移,即参照原点下移,因此fixed元素会空出margin-top的间距。

因此,能够从两层面处理这个难题:

1.将参照原点改成视窗:给fixed元素设定top。

2.处理margin-top塌陷难题,更多方式见正下方连接:

1)给body设定padding-top。
2)给body设定border,border色调和情况色1致。
3)给body设定position:fixed,这类会致使body的翻转条消退。

先凑合看着呀~忙过这阵来健全(允悲)(允悲)。。。
TBD:content姓名和盒实体模型content重啦待改...

  • 不懂position:fixed?=> position|MDN
  • 不懂margin-top塌陷?=> margin-top塌陷难题的状况与处理

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。