CSS定位面板问题

Question

我一直试图在几周内制作这种布局，但我似乎根本不能这样做！

所以，如果不是很麻烦，有人可以尝试给我一个链接或类似的东西，这样我就可以继续我的网站了。

Answer 1

这是（希望）正确方向的一步。

Demo

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

定位基础知识

将元素的位置设置为绝对会让您根据像素坐标自由放置它，但将它放在容器中以限制它通常是个好主意。您可以通过创建具有相对位置（或除默认值之外的任何其他值）的父级来为绝对定位的元素创建容器。

使用变量值（百分比）

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

定位元素

然后，您可以使用left和top属性根据百分比值定位元素。左侧为位置：绝对元素表示＆＃34;来自第一个非静态父级的左边缘的某些值＆＃34;。同样适用于顶部，底部和右侧。

以元素为中心

要将具有绝对定位的元素放置在其第一个非静态父级的中间，请为其赋予左值50％和最高值50％。 （父母宽度的50％来自父母的左边缘，高度的50％来自顶部）。这会将元素的左上角定位在父元素的中间位置。要使元素完全居中，您需要将其偏移一半的宽度和高度。您可以将margin-left和margin-right与负值一起使用。

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

HTML

<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>

CSS

.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%;
}