Question

如何使用css将两个div放在具有绝对位置的div之后，在{2} div之后定位bottom 0 div。

我希望蓝色div显示在黑色边框的正下方。在我目前的演示中，边框和蓝色重叠，就像在我的项目中一样。如何使它们不重叠

.footer {
  /*position: fixed;*/
  display: block;
  position: ;
  /*position:absolute;*/
  margin: auto;
  width: 100%;
  height: 40px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #2f4296;
  border-top: solid 1px #4443af;
  vertical-align: middle;
}

.flip {
  /backface-visibility: hidden;
  border: 1px solid black;
  height: 100%;
  font: normal 14px helvetica, arial, san serif;
  padding: 10px;
  position: absolute;
  transform-origin: 50% 50% 0px;
  transition: all 3s;
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid black;
  /*height: 100%;*/
  font: normal 14px helvetica, arial, san serif;
  /*padding: 10px;*/
  position: absolute;
  transform-origin: 50% 50% 0px;
  -moz-transform-origin: 50% 50% 0px;
  -ms-transform-origin: 50% 50% 0px;
  -o-transform-origin: 50% 50% 0px;
  -webkit-transform-origin: 50% 50% 0px;
  transition: all 3s;
  -moz-transition: all 3s;
  -ms-transition: all 3s;
  -o-transition: all 3s;
  -webkit-transition: all 3s;
}

<div class="flip"></div>
<div class="flip"></div>

<div class="footer"></div>

Answer 1

使position:absolute从页面上的正常流中删除元素。

您可以尝试这样的事情

HTML

<div class="flip-container">
<div class="flip"></div>
<div class="flip"></div>
</div>
<div class="footer"></div>

CSS

.footer {
  display: block;
  margin: auto;
  width: 100%;
  height: 40px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #2f4296;
  border-top: solid 1px #4443af;
  vertical-align: middle;
}
.flip-container{
  position: relative;
  height:90vh;
}

.flip {
  /backface-visibility: hidden;
  border: 1px solid black;
  height: 100%;
  font: normal 14px helvetica, arial, san serif;
  padding: 10px;
  position: absolute;
  transform-origin: 50% 50% 0px;
  transition: all 3s;
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid black;
  /*height: 100%;*/
  font: normal 14px helvetica, arial, san serif;
  /*padding: 10px;*/
  position: absolute;
  transform-origin: 50% 50% 0px;
  -moz-transform-origin: 50% 50% 0px;
  -ms-transform-origin: 50% 50% 0px;
  -o-transform-origin: 50% 50% 0px;
  -webkit-transform-origin: 50% 50% 0px;
  transition: all 3s;
  -moz-transition: all 3s;
  -ms-transition: all 3s;
  -o-transition: all 3s;
  -webkit-transition: all 3s;
}

Link for reference

希望这有助于......

Answer 2

尝试使用此代码。

.container {
  position: relative;
  height:50vh;
}
.footer {
  display: block;
  position: ;
  margin: auto;
  width: 100%;
  height: 40px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #2f4296;
  border-top: solid 1px #4443af;
  position: absolute;
  top:100%;
}
.flip {
  height: 100%;
  padding: 10px;
  position: absolute;
  border: 1px solid black;
  position: absolute;
  border-bottom-width:0;
}

<div class="container">
  <div class="flip"></div>
  <div class="flip"></div>

  <div class="footer"></div>
</div>

位置底部接下来正好在2 div以下的绝对位置

2 个答案: