分部定位

Question

html如下所示

＆＃13;

＆＃13;

.container {
  width: 90%;
  background: #eee;
  margin: 10px auto;
  position: relative;
  text-align:center;
}

#cf {
  background: green;
  position: relative;
  height: 360px;
  width: 640px;
  display:inline-block;
  margin: 20px;
}

#cf img {
  position:absolute;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
} 

＆＃13;

<div class="container">
    <div id="cf">
        <img class="bottom" src="http://placehold.it/640x360" />
        <img class="top" src="http://placehold.it/640x360" />
    </div><!--
 --><div id="cf">
        <img class="bottom" src="http://placehold.it/640x360" />
        <img class="top" src="http://placehold.it/640x360" />
    </div><!--
 --><div id="cf">
         <img class="bottom" src="http://placehold.it/640x360" />
         <img class="top" src="http://placehold.it/640x360" />
    </div><!--
 --><div id="cf">
         <img class="bottom" src="http://placehold.it/640x360" />
         <img class="top" src="http://placehold.it/640x360" />
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

背景正确对齐但图像偏移。我做错了什么？为什么图像没有正确定位？ 所有使用的图像尺寸为360px高度和640px宽度。

Answer 1

图片是偏移的，因为您在容器上使用text-align: center，这意味着您定位的子元素的原点不再是0 0，而是50% 0（中心顶部）：< / p>

.container {
  ...
  text-align:center;
}

要解决这个问题，你只需要为子元素覆盖它：

#cf {
  ..
  text-align: left;
}

下面的演示

＆＃13;

＆＃13;

.container {
  width: 90%;
  background: #eee;
  margin: 10px auto;
  position: relative;
  text-align:center;
}

#cf {
  background: green;
  position: relative;
  height: 360px;
  width: 640px;
  display:inline-block;
  margin: 20px;
  text-align: left;
}

#cf img {
  position:absolute;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
} 

＆＃13;

<div class="container">
            <div id="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div><!--
         --><div id="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div><!--
         --><div id="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div><!--
         --><div id="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div>
</div>

＆＃13;

＆＃13;

＆＃13;

但您的HTML无效。 ID必须是唯一的。您应该为class元素使用cf，如此...

＆＃13;

＆＃13;

.container {
  width: 90%;
  background: #eee;
  margin: 10px auto;
  position: relative;
  text-align:center;
}

.cf {
  background: green;
  position: relative;
  height: 360px;
  width: 640px;
  display:inline-block;
  margin: 20px;
  text-align: left;
}

.cf img {
  position:absolute;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.cf img.top:hover {
  opacity:0;
} 

＆＃13;

<div class="container">
            <div class="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div><!--
         --><div class="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div><!--
         --><div class="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div><!--
         --><div class="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div>
</div>

＆＃13;

＆＃13;

＆＃13;