使用 CSS 将元素放在容器底部

Question

我想在 CSS 的容器底部放置一个 100px 高度的红色元素。我试过了，但是红色元素没有显示，我不确定我做错了什么：

.banner {
  background-color: green;
  height: 100vh;
  position: relative;
  border-style: solid;
}

.element {
  background-color: red;
  height: 100px;
  bottom: 0px;
  position: absolute;
}

<body>
  <section class="banner">
    <div class="element">
    </div>
  </section>
</body>

搜索类似的帖子，我也试过改变定位方式，但还是不行。你能帮我理解我做错了什么吗？谢谢！

Answer 1

还需要添加宽度：

.element{
  background-color: red;
  height: 100px;
  width: 100px;
  bottom:0px;
  position: absolute;
}

.banner {
  background-color: green;
  height: 100vh;
  position: relative;
  border-style: solid;
}

.element {
  background-color: red;
  height: 100px;
  width: 100px;
  bottom: 0px;
  position: absolute;
}

<section class="banner">
  <div class="element">
  </div>
</section>

否则就是一维的div你是看不到的

Answer 2

你的代码没问题，div页面是空的，没有任何显示。您可以在 div 内包含一些元素，或定义其宽度。

请检查以下代码。

<style>
.banner{

  background-color: green;
  height: 100vh;
  position: relative;
  border-style: solid;
}

.element{
  background-color: red;
  Width: 100px;
  height: 100px;
  bottom: 0px;
  position: absolute;

}

</style>
</head>
<body>
<section class="banner">
    <div class="element">
    </div>
</section>
</body>

Answer 3

将left: 0;和right: 0;添加到classelement，然后你会看到一个完整的宽度<div>

.banner {
  background-color: green;
  height: 100vh;
  position: relative;
  border-style: solid;
}

.element {
  background-color: red;
  height: 100px;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
}

<body>
  <section class="banner">
    <div class="element">
    </div>
  </section>
</body>

Answer 4

看看这个！

.element {
    background-color: red;
    height: 100px;
    width: 100%;
    bottom: 0px;
    position: absolute;
    z-index: 10000000000000;
    display: inline-block;
}

.banner {
    background-color: green;
    height: 100vh;
    position: relative;
    border-style: solid;
}

使用 CSS 将元素放在容器底部

placing an element on the bottom of a container with CSS

html

css

css-position