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

Question

我有以下代码块：

<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;
}

我想要每个块如下：

但结果，我的块重叠了，没有按照我的意愿分开

http://jsfiddle.net/uacqjs91/

Answer 1

只需包装您的标签 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>

Answer 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>

Answer 3

您对所有项目使用相同的问题class。

将 .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>

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

Fixed multiple div tags not overlapping

html

css

css-position