Webkit 转换改变 <p> 元素的宽度......为什么？

Question

所以我有一个称为项目的祖父 div 和一个称为 wiggle 的父 div。在 wiggle 中，我将 p 元素设置为 100% 宽度。但是，它的宽度来自祖父母而不是摆动。我需要保持 p 绝对定位，因为它位于父图像边框的顶部。我已经研究过这个问题，人们经常建议设置一个计算出的宽度，所以我尝试了它并且它工作了......有点。

这个谜题最奇怪的是，当摆动变换运行时，宽度相对于父级发生变化，一旦结束，宽度再次相对于祖父级。变换属性不会尝试以任何方式控制宽度。

请看我的小提琴here。

.cork {
  background-image: url("https://s28.postimg.org/w8m9mc84d/cork_repeatable.jpg");
  background-repeat: repeat;
  /*min-height: 400px;*/
}
h1 {
  color: white;
  font-family: 'Sansita', sans-serif;
  font-style: italic;
  margin-bottom: 20px;
}
#pushpin {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border: 0;
  margin: 0;
  margin-bottom: -45px;
  position: relative;
  left: calc(50% - 40px);
  z-index: 1;
}
.projects img {
  border: 10px solid #fff;
  border-bottom: 55px solid #fff;
  margin-bottom: 30px;
  -webkit-box-shadow: -8px 11px 8px #232323;
  -moz-box-shadow: -8px 11px 8px #232323;
  box-shadow: -8px 11px 8px #232323;
}
.projects img:hover {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
}
@media (min-width: 992px) {
  img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    /* Firefox 10+, Firefox on Android */
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    /* IE 6-9 */
  }
}
@media (min-width: 1500px) {
  .row {
    width: 130%;
    position: relative;
    left: -15%;
  }
}
/* safari and chrome */

@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: 50% 0%;
    -moz-transform: rotate(0deg);
    -moz-transform-origin: 50% 0%;
    -ms-transform: rotate(0deg);
    -ms-transform-origin: 50% 0%;
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    transform-origin: 50% 0%;
  }
  25% {
    -webkit-transform: rotate(3deg);
    -webkit-transform-origin: 50% 0%;
    -moz-transform: rotate(3deg);
    -moz-transform-origin: 50% 0%;
    -ms-transform: rotate(3deg);
    -ms-transform-origin: 50% 0%;
    -o-transform: rotate(3deg);
    transform: rotate(3deg);
    transform-origin: 50% 0%;
  }
  50% {
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: 50% 0%;
    -moz-transform: rotate(0deg);
    -moz-transform-origin: 50% 0%;
    -ms-transform: rotate(0deg);
    -ms-transform-origin: 50% 0%;
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    transform-origin: 50% 0%;
  }
  75% {
    -webkit-transform: rotate(-3deg);
    -webkit-transform-origin: 50% 0%;
    -moz-transform: rotate(-3deg);
    -moz-transform-origin: 50% 0%;
    -ms-transform: rotate(-3deg);
    -ms-transform-origin: 50% 0%;
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
    transform-origin: 50% 0%;
  }
  100% {
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: 50% 0%;
    -moz-transform: rotate(0deg);
    -moz-transform-origin: 50% 0%;
    -ms-transform: rotate(0deg);
    -ms-transform-origin: 50% 0%;
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    transform-origin: 50% 0%;
  }
}
.wiggle {
  -webkit-animation: wiggle 4s linear 2;
  -moz-animation: wiggle 4s linear 2;
  -ms-animation: wiggle 4s linear 2;
  -o-animation: wiggle 4s linear 2;
  animation: wiggle 4s linear 2;
}
.wiggle p {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 30px;
  font: 400 18px/1'Kaushan Script', cursive;
  color: #232323;
  z-index: 1;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Sansita" rel="stylesheet">
<div class="container-fluid cork">
  <h1>Portfolio Examples</h1>
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-6 col-xs-12 projects">
        <img id="pushpin" src="https://s29.postimg.org/5am0cdtw3/push_pin_shadow.png" width="70px" />
        <div class="wiggle">
          <p>Data-Soap.com</p>
          <img src="https://s29.postimg.org/6bm91iavr/data_soap_dash.png" width="100%" />
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-xs-12 projects">
        <img id="pushpin" src="https://s29.postimg.org/5am0cdtw3/push_pin_shadow.png" width="70px" />
        <div class="wiggle">
          <p>Data-Soap.com</p>
          <img src="https://s29.postimg.org/6bm91iavr/data_soap_dash.png" width="100%" />
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

在 wiggle 中，我将 p 元素设置为 100% 宽度。但是，它的宽度是从祖父母而不是从摆动中获取的。

您的p 元素是绝对定位的。绝对定位元素的位置是相对于最近的“定位”（即，不是position: static; - 默认值）。因此，无论您希望绝对定位元素相对于哪个元素进行定位，请确保它是最接近绝对定位元素的父元素，并为其指定 position 而不是 static.

http://www.w3schools.com/css/css_positioning.asp

具有位置的元素：绝对；相对于最近的定位祖先定位（而不是相对于视口定位，如固定）。