位置绝对影响父 div 的填充答案

【问题标题】：Postion absolute effecting padding of parent div位置绝对影响父 div 的填充
【发布时间】：2018-05-22 19:46:35
【问题描述】：

我正在尝试将按钮修复到 div 的右边缘。

HTML：

<div id="header">
  <button type="button" uk-toggle="target: #offcanvas-flip" uk-icon="icon: plus"></button> 
</div>

CSS：

 #header {
   margin-left: 240px;
   background-color: #0070e0;
   padding: 20px;
   position: relative;
 }

 #header > button {
   position: absolute;
   top: 10px;
   right: 10px;
   color: #ffffff;
 }

申请position: absolute后：

您可以在上图中看到父 div 上的原始 padding: 20px 被忽略了。

删除position: absolute时：

将原始填充带回来，但正如您所见，button 不在右侧。应用float: right也有同样的效果。

有人可以帮我解决这个问题，更重要的是解释是什么导致了这个问题，以便我更好地学习。如果这是一个非常基本的问题，我们深表歉意。

【问题讨论】：

你试过了吗：“padding 20px !important”？
Absolute positioning ignoring padding of parent的可能重复
@BianGoole 在提供的代码中没有覆盖填充的规则。将内边距增加到30px 将增加元素高度，表明实际应用了内边距。 !important 不太可能有任何影响。

标签： html css

【解决方案1】：

不忽略，绝对位置不会占用父div的padding。只需设置 div 的高度并将绝对元素居中即可。如果子元素是绝对的，则 20px 填充可能是父 div 的整个高度。为了更好地澄清：您的标题采用 40px 的高度（顶部填充 20px，底部填充 20px），并且您的绝对按钮不会改变高度，但是如果您不将位置设置为绝对，父 div 将取按钮的高度 + 40px 的内边距。

#header {
   margin-left: 240px;
   background-color: #0070e0;
   padding: 20px;
   position: relative;
 }

 #header > button {
   position: absolute;
   top: 10px;
   right: 10px;
   color: #ffffff;
 }

<div id="header">
  <button type="button" uk-toggle="target: #offcanvas-flip" uk-icon="icon: plus"></button> 
</div>

【讨论】：

感谢您的解释。所以如果想增加父元素的高度，我可以简单地给它一些高度，然后根据高度将按钮居中？我理解正确吗？

【解决方案2】：

使用absolute 时不会删除填充，但absolute 元素的height 和width 不再是parent 元素的一部分，因此会丢失height。现在如果你想改变父元素的height，你可以增加padding或者给它height属性。

 #header {
   margin-left: 240px;
   background-color: #0070e0;
   padding: 40px;
   position: relative;
 }

 #header > button {
   position: absolute;
   top: 30px;
   right: 10px;
   color: #ffffff;
 }

<div id="header">
  <button type="button" uk-toggle="target: #offcanvas-flip" uk-icon="icon: plus">x</button> 
</div>

【讨论】：

【解决方案3】：

原因是，令人惊讶的是，当 div 具有 position: absolute 时，它的包含框是父级的填充框（即，围绕其填充的框）。这是令人惊讶的，因为通常（即使用静态或相对定位时）包含框是父级的内容框。

不过，它仅在您不希望绝对定位的 div 拥有任何额外的填充时才有效。我认为最通用的解决方案是使用带有 clear:both 属性的 float

#header {
   margin-left: 240px;
   background-color: #0070e0;
   padding: 20px;
   position: relative;
 }

 #header > button {
   color: #ffffff;
   float:right;
 }

<div id="header">
  <button type="button" uk-toggle="target: #offcanvas-flip" uk-icon="icon: plus"></button>
  <div style="clear:both;">
  
  </div>
</div>

【讨论】：