Question

因此，对于我的网页，我试图将div（“开始”按钮）放置在另一个现有父div（在这种情况下为“课程块”）中。我要实现的是白色的“开始”按钮，您可以从此处的imgur链接中看到它。我知道我不应该发布图像，但是示意图对于这个问题是绝对相关和必要的。

https://imgur.com/Vc3kTim

我尝试将“开始按钮” DIV设置为绝对位置（从对代码的尝试中可以看出）。但是，任何试图偏移“容器” DIV中的div元素的尝试都只会使其消失。

HTML：

    <div class="Courses">
      <h1>Courses</h1>
      <div id="Year-7" class="Course-Block">
        <div class="Container Green">
          <span>Testing</span>
        </div>

        <div class="Start-Button">
          awdawd
        </div>

        <div class="Block-Content">
          <span>Example Paragraph</span>
        </div>

      </div>

      <div id="Year-8" class="Course-Block">
        <div class="Container Yellow">
          <span>Testinag</span>
        </div>

        <div class="Block-Content">
          <span>Example Paragraph</span>
        </div>

      </div>

      <div id="Year-9" class="Course-Block">
        <div class="Container Red">
          <span>testing</span>
        </div>

        <div class="Block-Content">
          <span>Example Paragraph</span>
        </div>
      </div>
    </div>

CSS

        .Course-Block{
          display: inline-block;
          margin: 0px 50px;
          border: 1px solid black;
          height: 400px;
          width: 300px;
        }

        .Courses{
          text-align: center;
          background-color: lightYellow
        }

        .Block-Content {
          border: 1px black solid;
          height: 350px;
          background-color: lightBlue;
          line-height: 350px;
          text-align: center;
        }

        .Container {
          height: 50px;
          font-size: 20px;
          font-family: Arial;
          background-color: white;
          line-height: 50px;
          text-align: center;
        }

        .Start-Button {
          position: absolute;
          background-color: Green;
          border: 1px solid black;
          z-index: 10;
        }

        span {
          display: inline-block;
          vertical-align: middle;
          line-height: normal;
        }

完整的网站代码：https://jsfiddle.net/bwpxky7f/ 我建议您从链接中读取内容，因为它比我上面粘贴的代码更清楚，而且也没有太多。

Answer 1

您需要将position:relative添加到.course-block并将.start-button设置在底部，如下所示：

.Start-Button {
  position: absolute;
  background-color: Green;
  border: 1px solid black;
  z-index: 10;
  bottom:0;
  right:0;
  left:0;
} 

.Course-Block{
  display: inline-block;
  margin: 0px 50px;
  border: 1px solid black;
  height: 400px;
  width: 300px;
  position:relative;
}

如何在代码中在另一个div中自由移动div元素？

1 个答案: