按钮在div中的位置(点击按钮显示div内容)

按钮在div中的位置可以通过CSS来控制。我们可以使用CSS的position属性来设置按钮在div中的位置。position属性有多个值可选，包括static、relative、absolute和fixed。

1. static：这是默认的position属性值，也就是元素在文档流中正常的位置。在这种情况下，按钮会按照HTML文档的顺序放置在div中，不会受到其他CSS属性的影响。

示例代码：

<div>
  <button>按钮</button>
</div>

2. relative：这种设置会使按钮相对于它在文档流中的正常位置进行偏移。我们可以通过top、bottom、left和right属性来设置偏移的距离。

示例代码：

<div style="position: relative;">
  <button style="position: relative; top: 20px; left: 50px;">按钮</button>
</div>

在这个例子中，按钮相对于它在文档流中的位置向下移动了20像素，向右移动了50像素。

3. absolute：这种设置会使按钮脱离文档流，并相对于最近的具有定位属性（非static）的父元素进行定位。如果没有找到这样的父元素，则相对于整个文档进行定位。

示例代码：

<div style="position: relative;">
  <button style="position: absolute; top: 20px; left: 50px;">按钮</button>
</div>

在这个例子中，按钮相对于包含它的div元素进行定位，向下移动了20像素，向右移动了50像素。

4. fixed：这种设置会使按钮脱离文档流，并相对于浏览器窗口进行定位。无论页面滚动与否，按钮的位置都不会改变。

示例代码：

<button style="position: fixed; top: 20px; left: 50px;">按钮</button>

在这个例子中，按钮会始终固定在浏览器窗口的左上角，无论页面滚动与否。

需要注意的是，如果按钮的父元素没有设置position属性，那么按钮的定位将会相对于文档进行定位。按钮的定位可能会受到其他CSS属性的影响，如margin、padding、width和height等。

通过CSS的position属性，我们可以控制按钮在div中的位置。根据不同的需求，我们可以选择不同的position属性值来实现按钮在div中的定位效果。