CSS定位面板问题

Question

我已经尝试做这个布局好几个星期了，但我似乎根本无法得到这样的结果！

因此，如果不是很麻烦，有人可以尝试给我一个链接或类似的东西，以便我可以继续与我的网站。

Answer 1

这是朝着（希望）正确方向迈出的一步。

演示

这里需要记住一些非常重要的事情：

定位基础知识

将元素的位置设置为绝对位置将允许您根据像素坐标自由放置它，但通常最好将其放入容器中以限制它。您可以通过创建具有相对位置（或除默认静态位置之外的任何位置）的父级来为绝对定位元素创建容器。

使用变量值（百分比）

此外，您希望使用百分比来定位元素，以便可以调整其大小并确保居中。您可以为元素指定 % 宽度或高度，它将是其第一个非静态父元素的宽度或其他内容的 %。

定位元素

然后，您可以使用 left 和 top 属性根据百分比值定位元素。 Left 表示位置：绝对元素表示“来自第一个非静态父级左边缘的某个值”。对于顶部、底部和右侧也是如此。

将元素居中

以将具有绝对定位的元素定位在其第一个非静态父级的中间，您可以为其指定 50% 的左值和 50% 的上值。 （父级宽度的 50% 距该父级的左边缘，50% 的高度距顶部）。这会将元素的左上角定位在父元素的中间。要使元素完全居中，您需要将其偏移其宽度和高度的一半。为此，您可以使用带有负值的 margin-left 和 margin-right 。

从那里开始，您可以根据需要进行调整，就像我在提供的演示中所做的那样。研究代码（也粘贴在下面以供将来参考）并查看元素如何定位以及使用了哪些属性。

HTMLCSS

<div class="container">

    <div class="block tl"></div>
    <div class="block t"></div>
    <div class="block tr"></div>
    <div class="block l"></div>
    <div class="center"></div>
    <div class="block r"></div>
    <div class="block bl"></div>
    <div class="block b"></div>
    <div class="block br"></div>

</div>

​

.container
{
    width: 300px;
    height: 300px;
    position:relative;
    margin:100px;
}

.block, .center
{
    width:25%;
    height:25%;
    background:#5aa;
    border-radius:10px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-12%;
    margin-top:-12%;
}

.center
{
    width:30%;
    height:30%;
    margin-left:-15%;
    margin-top:-15%;
}

.center
{
    border-radius:100%;
}

.tl
{
    left:20%;
    top:20%;
}
.tr
{
    left:80%;
    top:20%;
}
.br
{
    left:80%;
    top:80%;
}
.bl
{
    left:20%;
    top:80%;
}
.t
{
    top:10%;
}
.r
{
    left:90%;
}
.b
{
    top:90%;
}
.l
{
    left:10%;
}