绝对定位div中的神秘偏移

时间：2017-04-09 05:21:32

标签： html css

所以我的小部件工作完美，除了一个令人难以置信的混乱细节。在开发过程中的某个时刻，每个backside的{​​{1}}在翻转过程中都会被忽略，我不能为我的生活找出方法。

编辑：添加一个SNIPPET 

flipper
var cells = document.getElementsByClassName("flipper");
var list = document.getElementsByClassName("cardtext");
for (var i = 0; i < list.length; i++)
  list[i].style.display = "none";
for (var j = 0; j < cells.length; j++) {
  cells[j].getElementsByClassName("frontside")[0].textContent = list[Math.floor(Math.random() * list.length)].textContent;
  cells[j].getElementsByClassName("backside")[0].textContent = list[Math.floor(Math.random() * list.length)].textContent;
}

function replaceCardText(c) {
  var randText = Math.floor(Math.random() * list.length);
  if (cells[c].classList.contains("flip"))
    cells[c].getElementsByClassName("frontside")[0].textContent = list[randText].textContent;
  else
    cells[c].getElementsByClassName("backside")[0].textContent = list[randText].textContent;
}

setInterval(function() {
  var randCell = Math.floor(Math.random() * cells.length);
  cells[randCell].classList.toggle("flip");
  setTimeout(function() {
    replaceCardText(randCell);
  }, 400);
}, 750);
#symptoms {}

#grid {
  margin: 0 5%;
  border-collapse: collapse;
  -webkit-perspective: 500px;
  perspective: 500px;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}


/*#grid > div > div {
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }*/

#grid .flipper {
  position: relative;
  display: table-cell;
  width: 175px;
  height: 50px;
  transition: 0.4s;
  transform-style: preserve-3d;
}

.flip {
  transform: rotateX(180deg);
}

#grid .frontside,
.backside {
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #00494F;
  text-align: center;
  font-family: monospace;
  font-size: 12pt;
  font-weight: 800;
  color: #00494F;
}

#grid .frontside {
  z-index: 2;
  transform: rotateX(0deg);
  background: #CCCCCC;
}

#grid .backside {
  transform: rotateX(180deg);
  background: #00A3C4;
}

#grid .cardtext {}

offset panels

您可以从剪辑中看到蓝色矩形向上偏移了大约两个像素。

我一直在疯狂地通过检查员戳东西，我找不到一个可以改变<section id="upper"> <div id="symptoms"> <h3>Suffer No Longer!</h3> <div id="grid"> <div class="flipper"> <div class="frontside"></div> <div class="backside"></div> </div> <div class="flipper"> <div class="frontside"></div> <div class="backside"></div> </div> <div class="flipper"> <div class="frontside"></div> <div class="backside"></div> </div> <div class="flipper"> <div class="frontside"></div> <div class="backside"></div> </div> </div> <div id="grid"> <div class="flipper"> <div class="frontside"></div> <div class="backside"></div> </div> <div class="flipper"> <div class="frontside"></div> <div class="backside"></div> </div> <div class="flipper"> <div class="frontside"></div> <div class="backside"></div> </div> <div class="flipper"> <div class="frontside"></div> <div class="backside"></div> </div> </div> <div id="grid"> <div class="flipper"> <div class="frontside"></div> <div class="backside"></div> </div> <div class="flipper"> <div class="frontside"></div> <div class="backside"></div> </div> <div class="flipper"> <div class="frontside"></div> <div class="backside"></div> </div> <div class="flipper"> <div class="frontside"></div> <div class="backside"></div> </div> </div> <h3 style="text-align: right">Call Your Coach!</h3> <section> <div class="cardtext">total weight gain</div> <div class="cardtext">beer belly</div> <div class="cardtext">heavy hips</div> <div class="cardtext">loss of waistline</div> <div class="cardtext">pasta cravings</div> <div class="cardtext">sugar cravings</div> <div class="cardtext">anxiety</div> <div class="cardtext">loss of libido</div> <div class="cardtext">depression</div> <div class="cardtext">bread cravings</div> <div class="cardtext">stress overload</div> <div class="cardtext">depression</div> <div class="cardtext">chocolate cravings</div> <div class="cardtext">crave salty snacks</div> <div class="cardtext">fight fatigue</div> <div class="cardtext">night sweats</div> <div class="cardtext">can't fall asleep</div> <div class="cardtext">bloating</div> <div class="cardtext">shortness of breath</div> <div class="cardtext">hot flashes</div> <div class="cardtext">can't stay asleep</div> <div class="cardtext">sleep apnea</div> <div class="cardtext">belching</div> <div class="cardtext">cramping &amp; gas</div> <div class="cardtext">sinus issues</div> <div class="cardtext">low back pain</div> <div class="cardtext">mid-back pain</div> <div class="cardtext">rt-shoulder pain</div> <div class="cardtext">knee pain</div> <div class="cardtext">cold susceptibility</div> <div class="cardtext">insulin resistance</div> <div class="cardtext">slow metabolism</div> <div class="cardtext">high cholesterol</div> <div class="cardtext">high blood pressure</div> <div class="cardtext">ovarian cysts</div> <div class="cardtext">allergies</div> <div class="cardtext">moon face</div> <div class="cardtext">puffy eyes</div> <div class="cardtext">thinning hair</div> <div class="cardtext">brown skin spots</div> <div class="cardtext">yellow eyes</div> <div class="cardtext">midriff bulge</div> <div class="cardtext">dark circles</div> <div class="cardtext">hair loss</div> <div class="cardtext">thinning eyebrows</div> <div class="cardtext">red skin spots</div> <div class="cardtext">vaginal dryness</div> <div class="cardtext">ridged nails</div> </section> </div> </section> div的位置的属性。有线索吗？

2 个答案:

答案 0 :(得分：0)

首先，您不应该为网格元素使用多个ID，而是为它们提供类。然后你可以尝试给你的网格元素提供属性：“display：table”以查看是否有什么帮助，最后你可以尝试为你绝对定位的.frontside和.backside定义一个“相对”父元素，看看是否有排除了问题。

答案 1 :(得分：0)

存在偏移量，因为.frontside和.backside div box-sizing值为content-box（默认值）。因此，当您将width和height定义为100％时，他们的＆＃34;内容区域＆＃34;已经需要175px * 50px。由于他们也有2px边框，整个盒子大小将是179px * 54px。由于.flipper的位置为absolute，并且附近的.flipper互相覆盖，因此在旋转之前不会显示偏移，使其感觉像是＃34;正常＆＃34;。但是，在旋转一个flipper后，将显示偏移量。

你可以给.frontsize和.backside一个大填充（例如30px）来看看会发生什么。

修复很简单：将box-sizing定义为border-box：

#grid .frontside, .backside {
  ...
  box-sizing: border-box;
}

＆＃13;
＆＃13; 
var cells = document.getElementsByClassName("flipper");
var list = document.getElementsByClassName("cardtext");
for (var i = 0; i < list.length; i++)
  list[i].style.display = "none";
for (var j = 0; j < cells.length; j++) {
  cells[j].getElementsByClassName("frontside")[0].textContent = list[Math.floor(Math.random() * list.length)].textContent;
  cells[j].getElementsByClassName("backside")[0].textContent = list[Math.floor(Math.random() * list.length)].textContent;
}

function replaceCardText(c) {
  var randText = Math.floor(Math.random() * list.length);
  if (cells[c].classList.contains("flip"))
    cells[c].getElementsByClassName("frontside")[0].textContent = list[randText].textContent;
  else
    cells[c].getElementsByClassName("backside")[0].textContent = list[randText].textContent;
}

setInterval(function() {
  var randCell = Math.floor(Math.random() * cells.length);
  cells[randCell].classList.toggle("flip");
  setTimeout(function() {
    replaceCardText(randCell);
  }, 400);
}, 750);
＆＃13; 
#symptoms {}

#grid {
  margin: 0 5%;
  border-collapse: collapse;
  -webkit-perspective: 500px;
  perspective: 500px;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}


/*#grid > div > div {
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }*/

#grid .flipper {
  position: relative;
  display: table-cell;
  width: 175px;
  height: 50px;
  transition: 0.4s;
  transform-style: preserve-3d;
}

.flip {
  transform: rotateX(180deg);
}

#grid .frontside,
.backside {
  box-sizing: border-box;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #00494F;
  text-align: center;
  font-family: monospace;
  font-size: 12pt;
  font-weight: 800;
  color: #00494F;
}

#grid .frontside {
  z-index: 2;
  transform: rotateX(0deg);
  background: #CCCCCC;
}

#grid .backside {
  transform: rotateX(180deg);
  background: #00A3C4;
}

#grid .cardtext {}
＆＃13; 
<section id="upper">
  <div id="symptoms">
    <h3>Suffer No Longer!</h3>
    <div id="grid">
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
    </div>
    <div id="grid">
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
    </div>
    <div id="grid">
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
    </div>
    <h3 style="text-align: right">Call Your Coach!</h3>
    <section>
      <div class="cardtext">total weight gain</div>
      <div class="cardtext">beer belly</div>
      <div class="cardtext">heavy hips</div>
      <div class="cardtext">loss of waistline</div>
      <div class="cardtext">pasta cravings</div>
      <div class="cardtext">sugar cravings</div>
      <div class="cardtext">anxiety</div>
      <div class="cardtext">loss of libido</div>
      <div class="cardtext">depression</div>
      <div class="cardtext">bread cravings</div>
      <div class="cardtext">stress overload</div>
      <div class="cardtext">depression</div>
      <div class="cardtext">chocolate cravings</div>
      <div class="cardtext">crave salty snacks</div>
      <div class="cardtext">fight fatigue</div>
      <div class="cardtext">night sweats</div>
      <div class="cardtext">can't fall asleep</div>
      <div class="cardtext">bloating</div>
      <div class="cardtext">shortness of breath</div>
      <div class="cardtext">hot flashes</div>
      <div class="cardtext">can't stay asleep</div>
      <div class="cardtext">sleep apnea</div>
      <div class="cardtext">belching</div>
      <div class="cardtext">cramping &amp; gas</div>
      <div class="cardtext">sinus issues</div>
      <div class="cardtext">low back pain</div>
      <div class="cardtext">mid-back pain</div>
      <div class="cardtext">rt-shoulder pain</div>
      <div class="cardtext">knee pain</div>
      <div class="cardtext">cold susceptibility</div>
      <div class="cardtext">insulin resistance</div>
      <div class="cardtext">slow metabolism</div>
      <div class="cardtext">high cholesterol</div>
      <div class="cardtext">high blood pressure</div>
      <div class="cardtext">ovarian cysts</div>
      <div class="cardtext">allergies</div>
      <div class="cardtext">moon face</div>
      <div class="cardtext">puffy eyes</div>
      <div class="cardtext">thinning hair</div>
      <div class="cardtext">brown skin spots</div>
      <div class="cardtext">yellow eyes</div>
      <div class="cardtext">midriff bulge</div>
      <div class="cardtext">dark circles</div>
      <div class="cardtext">hair loss</div>
      <div class="cardtext">thinning eyebrows</div>
      <div class="cardtext">red skin spots</div>
      <div class="cardtext">vaginal dryness</div>
      <div class="cardtext">ridged nails</div>
    </section>
  </div>
</section>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题