Исправлено несколько тегов div, не перекрывающихся - PullRequest
Новая
       8

Исправлено несколько тегов div, не перекрывающихся

0 голосов
/ 10 ноября 2018

У меня есть следующий блок кода: 

<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 голосов
/ 10 ноября 2018

Оберните ваши вещи, а затем установите фиксированную позицию на обертку так: 

.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>
0 голосов
/ 10 ноября 2018

Проблема, вы используете один и тот же класс для всех предметов.

Установите .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>
0 голосов
/ 10 ноября 2018

Просто оберните теги 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>
...