HTML中的button是常用的元素之一，可以用于提交表單、重置表單、觸發(fā)事件等。在布局設(shè)計中，掌握button的位置設(shè)置技巧也是非常重要的。

通過CSS的position屬性來設(shè)置button的位置，主要有以下幾種方式：

/* 設(shè)置button相對于其包含塊的位置 */
button {
position: relative;
left: 20px;
top: 10px;
}
/* 設(shè)置button相對于瀏覽器窗口的位置 */
button {
position: absolute;
left: 20px;
top: 10px;
}
/* 設(shè)置button相對于其父元素的位置 */
.parent {
position: relative;
}
.parent button {
position: absolute;
left: 20px;
top: 10px;
}

其中，position屬性值為relative時，left和top屬性表示button相對于其包含塊的左和上偏移量；而position屬性值為absolute時，left和top屬性則表示相對于瀏覽器窗口的位置。另外，如果要讓button相對于其父元素進(jìn)行定位，則需要先給父元素設(shè)置position:relative。

除了位置的設(shè)置，還可以通過CSS的z-index屬性來調(diào)整button在文檔流中的層級關(guān)系，使其覆蓋或者放在其他元素之后。例如：

button {
position: relative;
z-index: 2;
}
div {
position: relative;
z-index: 1;
}

上述代碼中，button的z-index設(shè)置為2，div的z-index設(shè)置為1，因此button會放在div之上。

總之，掌握button的位置設(shè)置技巧是很有必要的，在網(wǎng)頁布局設(shè)計中能夠起到事半功倍的效果。