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

Question

的CSS

div {
   padding: 20px;
}

的HTML

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

有没有一种方法可以使button忽略填充并拥抱父div右上角，而不影响p周围的20px？

我觉得也许可以对position属性做些事情，但是从我的简要研究来看，它似乎并没有满足我的要求。

Answer 1

您可以使用头寸或负边距：

位置：

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

负边距：

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

Answer 2

button {
  position: relative;
  left: -20px;
  top: -20px;
}

JSFiddle

Answer 3

尝试这个：

 * { margin: 0px; padding: 0px; } div { padding: 50px; background: yellow; position:relative; } div p { background: green; position: absolute; top: 0px; left: 0px; } 

 <div> <p>This is paragraph inside a div.</p> </div>