位置绝对影响父div的填充

Question

我正在尝试将按钮固定到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具有相同的效果。

有人可以帮助我解决这个问题，更重要的是解释导致这种情况的原因，以便我可以更好地学习。如果这是一个非常基本的问题，请道歉。

Answer 1

不会忽略，绝对位置不会采用父div的填充。只需设置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>

Answer 2

使用absolute时未删除填充，但height元素的width和absolute不再是parent元素的一部分因此失去height。现在，如果您想要更改父元素的height，您可以增加padding或赋予height属性。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

但是，如果您不希望绝对定位的div具有自己的任何额外填充，那么它只能起作用。我认为使用float with clear的最通用解决方案：属性

#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>