我在一个自举卡组里有意想不到的行为。

下面是我得到的:

正如你所看到的，第三张卡图像没有相同的顶值比其他的。 但是所有这些卡片都有相同的html和css代码（除了本页中的bootstrap代码外，没有JS）。

我尝试的是:

• 删除这第三张卡，然后我看到第二张卡（鞋子图像）有这个顶级属性问题。 所以这不是一个卡的问题，而是一个容器的问题，容器是一个自举卡套。

结果:

• 验证此图像的计算样式（inspect->style->computed），它告诉我图像的top:50%和position:relative是计算出来的。 如果我改变顶部值，图像不会移动。

如果需要，下面是我的代码:

>； HTML

<div class="col-md-10 mx-auto">

    <!-- cards container -->
        <div class="row my-3">
            <div class="card-deck">

                <!-- card -->
                <div class="card m-3">
                    <img alt="Outdoor" height="128px" width="128px" src="{{ asset("images/curriculum_vitae/hobbies/backpack.png") }}"/>
                    <div class="card-body">
                        <h5 class="card-title">Outdoor</h5>
                        <p>[...]</p>
                    </div>
                </div>
                <!-- end card -->

                <!-- card -->
                <div class="card m-3">
                    <img class="rotated" alt="Running" height="128px" width="128px" src="{{ asset("images/curriculum_vitae/hobbies/running_shoes.png") }}"/>
                    <div class="card-body">
                        <p>[...]</p>
                    </div>
                </div>
                <!-- end card -->

                <!-- card -->
                <div class="card m-3">
                    <img alt="Others sports" height="128px" width="128px" src="{{ asset("images/curriculum_vitae/hobbies/vtt.png") }}"/>
                    <div class="card-body">
                        <h5 class="card-title">Autres sports</h5>
                        <p>[...]</p>
                    </div>
                </div>
                <!-- end card -->

                <!-- card -->
                <div class="card m-3">
                    <img alt="Music" height="128px" width="128px" src="{{ asset("images/curriculum_vitae/hobbies/drum_set.png") }}"/>
                    <div class="card-body">
                        <h5 class="card-title">Musique</h5>
                        <p>[...]</p>
                    </div>
                </div>
            </div>
            <!-- end card -->

        </div>
        <!-- end cards container -->
    </div>

>； CSS

#hobbies-window .card {
    border-radius: 9px !important;
}

#hobbies-window .card img {
    margin: 0;
    position: relative;
    z-index: 2 !important;
    transform: translate(-50%, -50%);
    left: 50%;

    top: 50%;

    -ms-transition: top 0.8s ease;
    -webkit-transition: top 0.8s ease;
    -moz-transition: top 0.8s ease;
    -o-transition: top 0.8s ease;
    transition: top 0.8s ease;
}

#hobbies-window .card:hover img {
    top: 15%;

    -ms-transition: top 0.8s ease;
    -webkit-transition: top 0.8s ease;
    -moz-transition: top 0.8s ease;
    -o-transition: top 0.8s ease;
    transition: top 0.8s ease;
}

#hobbies-window .card img.rotated {
    transform: translate(-50%, -50%) rotate(20deg);

    -ms-transition: transform 0.8s ease, top 0.8s ease;
    -webkit-transition: transform 0.8s ease, top 0.8s ease;
    -moz-transition: transform 0.8s ease, top 0.8s ease;
    -o-transition: transform 0.8s ease, top 0.8s ease;
    transition: transform 0.8s ease, top 0.8s ease;
}

#hobbies-window .card:hover img.rotated {
    transform: translate(-50%, -50%) rotate(0deg);

    -ms-transition: transform 0.8s ease, top 0.8s ease;
    -webkit-transition: transform 0.8s ease, top 0.8s ease;
    -moz-transition: transform 0.8s ease, top 0.8s ease;
    -o-transition: transform 0.8s ease, top 0.8s ease;
    transition: transform 0.8s ease, top 0.8s ease;
}

/** Dark-blue background **/
#hobbies-window .card:before, #hobbies-window .card::before {
    border-radius: inherit;
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    background: #2b3b44;
}

#hobbies-window .card:hover:before, #hobbies-window .card:hover::before {
    width: 200px;
    height: 200px;
    border-radius: 50%;

    -ms-transition: width 0.8s ease, height 0.8s ease, border-radius 0.8s ease;
    -webkit-transition: width 0.8s ease, height 0.8s ease, border-radius 0.8s ease;
    -moz-transition: width 0.8s ease, height 0.8s ease, border-radius 0.8s ease;
    -o-transition: width 0.8s ease, height 0.8s ease, border-radius 0.8s ease;
    transition: width 0.8s ease, height 0.8s ease, border-radius 0.8s ease;
}

/** Card text **/

.card-title {
    font-weight: 600;
}

#hobbies-window .card p {
    font-size: 17px !important;
    margin-bottom: 10px !important;
}

#hobbies-window .card:hover {
    color: unset !important;
}

请告诉我关于这个问题的任何问题。

谢谢你对此有任何建议！