如何在css中设置位置

Question

＆＃13;

＆＃13;

.top{
  width:100%;
  height:50vh;
  background-color:red;
}
.bot{
  width:100%;
  height:50vh;
  background-color:black;
}
.content{
  position:relative;
  width:50px;
  height:50px;
  background-color:white;
  left: 0px;
  bottom:0px; 
}

＆＃13;

<div class='top'>
<div class='content'>
</div>
</div>
<div class='bot'>
</div>

＆＃13;

＆＃13;

＆＃13;

内容未放置在第一个div .top的内部底部，为什么position:relative bottom:0px不起作用，而定位在绝对位置则位于屏幕的底部，因此我可以将该div放在使用绝对位置的第一个div .top的底部，内容宽度高度必须改变。

Answer 1

将position: relative添加到.top并将position: absolute设置为.content

＆＃13;

＆＃13;

.top{
  width:100%;
  height:50vh;
  background-color:red;
  position:relative;
}
.bot{
  width:100%;
  height:50vh;
  background-color:black;
}
.content{
  position:absolute;
  width:50px;
  height:50px;
  background-color:white;
  left: 0px;
  bottom:0px; 
}

＆＃13;

<div class='top'>
<div class='content'>
</div>
</div>
<div class='bot'>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

底部0px不适用于位置相对，如果你想与postion相关，我找到了一个解决方案

＆＃13;

＆＃13;

.top{
  width:100%;
  height:50vh;
  background-color:red;
}
.bot{
  width:100%;
  height:50vh;
  background-color:black;
}
.content{
  position:relative;
  width:50px;
  height:50px;
  background-color:white;
  left: 0px;
 bottom: calc(-100% + 50px);
}

＆＃13;

<div class='top'>
<div class='content'>
</div>
</div>
<div class='bot'>
</div>

＆＃13;

＆＃13;

＆＃13;