html - 如何设置元素样式以忽略其父元素的填充？

Question

CSS

div {
   padding: 20px;
}

HTML

<div><button>test</button><p>this is some text</p></div>

有没有办法让 button 忽略填充并紧贴父级 div 的右上角，而不影响 p< 周围的 20px/?

我觉得我可以用 position 属性做一些事情，但从我的简短研究来看，它似乎并没有达到我想要的效果。

Answer 1

您可以使用头寸或负 margin :

职位:

div {
  padding: 20px;
  position: relative;
}
div button {
  position: absolute;
}

负边距:

div {
  padding: 20px;
}
button {
  margin: -20px 0 0 -20px;
}