修复了多个div标签不重叠的问题

时间:2018-11-10 08:28:06

标签: html css css-position

我有以下代码块:

<div class="fixme">Fixed 1</div>
<div class="fixme">Fixed 2</div>
<div class="fixme">Fixed 3</div>
<div class="fixme">Fixed 4</div>

和CSS:

.fixme {
  position: fixed;
  right: 0; 
  bottom: 0; 
  width: 24%; 
  text-align: center; 
  padding: 2%; 
  z-index: 1;
  background-color:red;
}

我希望每个块如下:

enter image description here

但是,结果是,我的块重叠了并且没有按照我的意愿分开

http://jsfiddle.net/uacqjs91/

3 个答案:

答案 0 :(得分:3)

只需包装标签div,然后将位置css添加到包装器

.wrapper {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 24%;
  z-index: 1;
}

.fixme {
  text-align: center;
  padding: 2%;
  margin-bottom: .5rem;
  background-color: red;
}

.fixme:last-child {
  margin-bottom: 0;
}
<div class="wrapper">
  <div class="fixme">Fixed 1</div>
  <div class="fixme">Fixed 2</div>
  <div class="fixme">Fixed 3</div>
  <div class="fixme">Fixed 4</div>
</div>

答案 1 :(得分:2)

包裹您的物品,然后仅将固定位置设置为包裹器,如下所示:

.fixme {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 150px;
  max-width: 50%;
  z-index: 1;
}

.fixme .item {
  padding: .5rem;
  text-align: center;
  background-color: #fff;
  border: 3px solid #000;
  margin: 10px;
}

body {
  font: .8rem/1.2 sans-serif;
}
<div class="fixme">
  <div class="item">Fixed 1</div>
  <div class="item">Fixed 2</div>
  <div class="item">Fixed 3</div>
  <div class="item">Fixed 4</div>
</div>

答案 2 :(得分:2)

所有项目都使用同一类的问题。

.fixme设置为一个整体div,并将所有四个项目都作为其子元素.fix

.fixme {
  position: fixed;
  right: 0; 
  bottom: 0; 
  text-align: center;
  z-index: 1;
  width: 24%; 
  
}
.fixme .fix {
   margin-bottom:20px; 
   padding: 2%; 
   background-color:red; 
 }
<div class="fixme">
<div class="fix">Fixed 1</div>
<div class="fix">Fixed 1</div>
<div class="fix">Fixed 1</div>
<div class="fix">Fixed 1</div>
</div>