为什么浮点数：导航时需要保留文本居中位置：绝对应用于标题？

时间：2017-10-23 13:59:14

标签： css css-float css-position

在标题中CSS position : absolute观察到一个奇怪的事情是，除非下面的菜单中有float:left，否则菜单文字不会垂直居中并保持在顶部。您可以通过运行此页面中给出的片段和全宽来看到这一点。我为float:none in lower screen width设置了媒体查询，取消了更高屏幕宽度的float:left。

现在，为什么会出现这种情况？为什么是float：当position：absolute应用于header时反向保持菜单文本中心，反之亦然？我在搜索时没有找到任何相关信息。

修改

有些答案说，这是因为＆＃34;崩溃＆＃34;利润率。但是他们没有解释为什么h1 of header不是＆＃34;崩溃＆＃34;并以这种方式行事？为什么只有h1 of menu是＆＃34;崩溃＆＃34; ？它似乎更像是选择某些元素的重叠而不是折叠。

EDIT2 -

请求答案提供者，如果他们想要分解片段以方便他们的解释，他们还应该在他们的答案中提供除片段部分之外的完整片段或其修改。因为div不是孤立的。答案应该是带有position的标题：absolute，它的h1和margin-top应用于标题下方div的h1。

请参阅此片段 -

＆＃13;
＆＃13; 
div.header {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: auto;
    text-align: center;
    color: #EE82EE;
    background-color: #000000;
}
.submenu {
 text-align: center;
  width:100%;
  margin:0;
  margin-top: 72px;
  color:black;
  height: 100px;
  background-color: red;
  float: left;
  padding:0px;
}
@media screen and (max-width: 766px){
  .submenu {
   float:none;
  }
}
＆＃13; 
<div class="header">
	<h1>HEADER </h1>
</div>
<div class="submenu">
  <h1>MENU</h1>
  
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：3)

修改：

正如我在评论中所解释的那样，标题中的h1并未崩溃，因为它使用position:absolute - 正如您在下面所见，这是防止崩溃的修复方法之一利润率。重叠只发生，因为您的标题是绝对定位的，因此它将显示在页面中其他所有内容的顶部。

总结一下，当垂直边距触及块元素之间无分离时，会发生折叠边距它们（例如边框或填充），没有浮动，没有绝对定位，未修复并且 overflow:visible < / em>（默认值）。还有一些其他案例，但涵盖了绝大多数原因，包括你的原因。

<强>答案

您看到的是折叠边距的影响。

CSS规范说，当两个元素的垂直边距接触时，两个边距将合并形成一个边距。

当第一个（或最后一个）子节点与父节点之间没有分离时，父/子元素也会发生这种情况 - 在这种情况下，折叠的边距最终会在父节点之外。

在您的情况下，您的h1具有浏览器样式表的默认边距。这将被折叠到其父级边距中，即默认为submenu元素，因为它是一个块元素。

防止保证金崩溃：
有很多方法可以防止孩子的边缘崩溃，包括：

  • 浮
  • 职位：绝对。
  • 将显示更改为以下之一：“table-cell”，“table-caption”或“inline-block＆＃34;。
  • 添加除可见之外的溢出，例如overflow:auto
  • 添加＆＃34;分离＆＃34;在父母和孩子之间，例如边框或填充。

当您向孩子添加float时，这是阻止边距折叠的方法之一，因此您仍然可以在h1顶部显示包含单词＆ ＃34;菜单＆＃34;

查看一些示例：

＆＃13;
＆＃13; 
.submenu {
 text-align: center;
  width:100%;
  margin:0;
  margin-top: 0px;
  color:black;
  height: 100px;
  background-color: red;
  float: none;
  padding:0px;
}
.container { border:2px solid #ff0;}
.container:after {
  content: "";
  display: table;
  clear: both;
}
h1{ margin:30px 0;}
.submenu.hasfloat {float: left;}
.submenu.hasoverflow {overflow: auto;}
＆＃13; 
<p>The top margin of this h1 is collapsed into the parent's margin. </p><p>The parent's top margin is 10px, and the h1 has a top margin of 30px, so when collapsed the parent now takes on the child's margin because it is larger - you can see the margin surrounded with the yellow border:</p>
<div class="container">
<div class="submenu">
  <h1>Collapsed</h1>
</div>
</div>
<p>The top margin of this h1 isn't collapsing because the parent is <b>floated</b>:</p>
<div class="container">
<div class="submenu hasfloat">
  <h1>Not collapsed</h1>
</div>
</div>
<p>The top margin of this h1 isn't collapsing because the parent has <b>overflow:auto</b> (i.e. any value other than visible):</p>
<div class="container">
<div class="submenu hasoverflow">
  <h1>Not collapsed</h1>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

示例：显示即使标题没有绝对定位，问题仍然存在。

＆＃13;
＆＃13; 
div.header {
    position: relative;
    left: 0%;
    top: 0%;
    width: 100%;
    height: auto;
    text-align: center;
    color: #EE82EE;
    background-color: #000000;
}
.submenu {
 text-align: center;
  width:100%;
  margin:0;
  margin-top: 72px;
  color:black;
  height: 100px;
  background-color: red;
  float: left;
  padding:0px;
}
@media screen and (max-width: 766px){
  .submenu {
   float:none;
  }
}
＆＃13; 
<div class="header">
	<h1>HEADER <small>- position:relative</small></h1>
</div>
<div class="submenu">
  <h1>MENU <small>- top margin is still collapsing</small></h1>
  
</div>
＆＃13;
＆＃13;
＆＃13;

参考文献：详细了解折扣边距：

答案 1 :(得分：-1)

实际上您的float: left不会垂直保留文本中心。让我们删除标题部分并使用子菜单。

看，子菜单中的<h1>标签有margin-top属性。当您添加float: none;时，保证金不会影响任何内容，请查看屏幕截图：enter image description here

但是当您添加float: left时，此边距会向下移动h1，请检查另一个屏幕：

enter image description here

答案 2 :(得分：-1)

应用于标题的position: absolute使div固定，而所有其他div变得相对MOVABLE。所以，为了使其他的也固定，我们给它们一些其他属性，如display：inline-block，float：left等。

另外，需要给绝对div下方的div给出一个margin-top来抵消崩溃的边际

请查看应用了这些修补程序的工作代码，其中包含所有div https://codepen.io/anon/pen/QqRgRB

该片段如下 - 

div.header {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: auto;
    text-align: center;
    color: #EE82EE;
    background-color: grey;
}
.menu {
 text-align: center;
  width:100%;
  margin:0;
  margin-top: 72px;
  color:black;
  height: 100px;
  background-color: red;
  float: left;
  padding:0px;
  display: inline-block;
}
.submenu {
   text-align: center;
  width:100%;
  margin:0;
  margin-top: 0px;
  color:black;
  height: 100px;
  background-color: yellow;
  display:inline-block;
  padding:0px;
}
@media screen and (max-width: 766px){
  .menu {
   float:none;
  }
}
body {
  margin:0px;
}
<div class="header">
	<h1>HEADER </h1>
</div>
<div class="menu">
  <h1>MENU</h1>
  
</div>

<div class="submenu">
  <h1>SUBMENU</h2>
</div>

相关问题
最新问题