您是否知道重新创建此布局的最佳做法是什么？我正在努力将描述 div 放在某个地方 [关闭]

Question

我正在尝试重新创建如屏幕截图所示的内容：上面有一个图像和一些精美的按钮，如果您将鼠标悬停在它们上面，则会显示一个描述。我应该如何放置描述的 div（容器）以及它们应该具有什么类型的位置属性？

我在这里链接网站仅供参考（https://www.virtuosiracing.com/formula-2/）。据我了解，他们用 Wix 制作了网站，所以代码 - 至少对我来说 - 似乎有点不可读且不容易理解。

我想我会有一个以汽车图像为背景和绝对位置的 div。然后是一些具有相对位置属性的子 div（fab 容器）。但仍然无法确定将段落放在哪里。但我想听听一些专家对如何处理这种布局的建议。提前谢谢你！

我试过了，这是我得到的结果： .

代码就在这里： index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="wrapper">
        <div class="car_wrapper">
            <img class="car_image" src="./car.webp" alt="car">
            <div class="fab_container first">
                <img class="fab_image" src="./plus_btncar_fab.svg" alt="fab">
            </div>
            <div class="fab_container second">
                <img class="fab_image" src="./plus_btncar_fab.svg" alt="fab">
            </div>
            <div class="fab_container third">
                <img class="fab_image" src="./plus_btncar_fab.svg" alt="fab">
            </div>
            <div class="fab_container fourth">
                <img class="fab_image" src="./plus_btncar_fab.svg" alt="fab">
            </div>
        </div>
    </div>
</body>
</html>

style.css

* {
   margin: 0;
   padding: 0;
   border: 1px solid red;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #181818;
}

.car_image {
    width: 100%;
    object-fit: cover;
    background-color: #fff;
}

.car_wrapper {
    width: 50%;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper {
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.fab_container {
    position: absolute;
    height: 100%;
    width: 25%;
}

.first {
    left: 0%;
}

.second {
    left: 25%;
}

.third {
    left: 50%;
}

.fourth {
    left: 75%;
}

.fab_image {
    z-index: 999;
    width: 25px;
    background-color: blue;
    position: relative;
}

.fab_image:hover {
    width: 200px;
}

.first > .fab_image {
    left: 60%;
    top: 60%;
}

.second > .fab_image {
    left: 45%;
    top: 25%;
}

.third > .fab_image {
    left: 45%;
    top: 10%;
}

.fourth > .fab_image {
    left: 55%;
    top: 30%;
}

您是否知道重新创建此布局的最佳做法是什么？我正在努力将描述 div 放在某个地方 [关闭]

问题描述投票：0回答：0

最新问题

您是否知道重新创建此布局的最佳做法是什么？我正在努力将描述 div 放在某个地方 [关闭]

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0