无法在HTML/CSS中定位按钮

Question

我有一个问题，我似乎无法解决，尽管在我之前的帖子中遵循了方向，我刚刚开始学习html/css。这是我现在显示的按钮：here

这是我希望它出现的位置。尽管改变了顶部、左侧或底部，但它似乎没有移动：

here

这就是我想要的位置。背景只是一个图像，而不是多个div。这是我唯一的代码：

<section>
  <div class="content">
    <div class="container">
      
      <div class="wrap">
        <div class="fix-7-12">
         <div><p class="ae-2">
            <button style{
              top: 100px;
              right: 1000px;
              left: 10000000px;
            }
              >Try yourself</button
            >
          </p></div>>
          
        </div>
      </div>
    </div>
  </div>
  <img
    src="assets/img/background/fire2.png"
    width="1450"
    height="850"
  ></img>
</section>

Answer 1

我认为你应该使用带百分比的左、上等样式。如果我们看一下第二张图片中按钮的中心：

顶部: 35%，左侧: 60%

此外，您应该将显示更改为block，以便将按钮视为矩形元素。我还给出了宽度和高度。如果您愿意，您可以更改它们。

因此，我将您的HTML代码更改为：

​

<section>
    <div class="content">
        <div class="container">
            <div class="wrap">
                <div class="fix-7-12">
                    <div><p class="ae-2">
                        <button 
                            style="position: absolute; display: block; top: 35%; left: 60%;
                                width: 120px; height: 60px;">
                            Try yourself
                        </button>
                    </p></div>
                </div>
            </div>
        </div>
    </div>
    <img
        src="assets/img/background/fire2.png"
        width="1450"
        height="850"
    >
</section>

​

以下是屏幕截图：

​

​

Answer 2

您的HTML中有一些错误。首先，style属性需要是一个字符串。position属性需要放在第一位。所以应该是"position: absolute;top: 100px;right: 1000px; left: 10000000px;"。img标签没有结束标签。

正确的HTML：

​

<section>
  <div class="content">
    <div class="container">
      
      <div class="wrap">
        <div class="fix-7-12">
         <div><p class="ae-2">
            <button style="position: absolute;top: 100px;right: 1000px; left: 10000000px;"
              >Try yourself</button
            >
          </p></div>>
          
        </div>
      </div>
    </div>
  </div>
  <img
    src="assets/img/background/fire2.png"
    width="1450"
    height="850"
  >
</section>

​