将div放在中心并与容器div重叠

Question

我有一个$ dotnet --version 2.1.105 $ dotnet new webapi -o tmp_api The template "ASP.NET Core Web API" was created successfully. $ cd tmp_api/ $ dotnet watch run No executable found matching command "dotnet-watch" div，它位于页面底部，.footerdot图像与页面中心对齐并与容器div重叠。我附上图片是为了更好地理解布局应该是什么样子。

以下是代码：

bluedot

Answer 1

从图像中我了解到您正在尝试创建滑块。 footerdot充当滑块基础，点用于滑过它。

这包括将dot与footerdot重叠。因此，为了将div与另一个div重叠，我们需要将footerdot和dot放在另一个parentdiv中position: relative。

现在，两个子div都被转发到parentdiv。这里的流量是正常的。

为了dot放置footerdot，即我们不会改变footerdot的位置，而是改变dot的位置。所以我们需要将dot绝对定位到它的父母身上。将position:absolute添加到dot。现在dot与footerdot重叠。给dot一个固定的宽度和高度。例如：height: 20px; width: 20px。

但dot仍未以footerdot为中心。相反，它位于左上角。为了实现这一目标，我们需要向dotparent添加一个dot div，它取footerdot的宽度，我们可以将dot置于其中。但我们还需要将属性position: absolute从dot转移到dotparent。并将left: 0; right: 0添加到dotparent，以便它从左到右占据父级的整个宽度。现在dotparent的宽度与footerdot相同。在dot上应用dotparent，margin: 0 auto可以在dot内居中。

最后是Html结构：

<div class='parentdiv'><div class='footerdot'></div><div class='parentdot'><div class='dot'></div></div></div>