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

Question

所以我在其中有一个名为 projects 的祖父 div 和一个名为 wiggle 的父 div。在 wiggle 中，我将 p 元素设置为 100% 宽度。但是，它的宽度来自祖 parent 而不是摆动。我需要保持 p 绝对定位，因为它位于父图像边框的顶部。我研究了这个问题，人们经常建议设置一个计算宽度，所以我试了一下，它奏效了……有点。

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

请看我的 fiddle 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

In wiggle I have a p element set to 100% width. However, it is taking its width from the grandparent instead of from wiggle.

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

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

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).