如何添加 position/overlay 这些图像和 div？

Question

我正在为我的一个朋友建立一个网站，但我无法将 div 放在左侧，然后将图像放在右侧每个角落的顶部。下面用图来解释：Diagram

我真的不知道如何定位这一切，同时又保持它对移动设备的响应感谢任何帮助！

Answer 1

让我们先创建左右两部分，然后再创建这三个元素

您可以使用弹性框来创建设计的两个部分或者，如果您不想编写很多代码，可以使用 bootstrap

这个例子是纯粹的CSS

.parent{
     display: flex;
     flex-wrap: wrap;
}
.left,.right{
     width: 50%;
}
@media (max-width:768px){
    .left,.right{
         width: 100%;
    }
}

或者如果你 link bootstrap 文件则不需要额外的 CSS（前者 div 是左边的，后者是右边的）

<div class="col-12 col-md-6"></div>
<div class="col-12 col-md-6"></div>

现在，对于这三个元素，您应该使用 CSS 定位

我无法解释所有关于定位的内容，因为它太多了，但是我们有 2 种类型的职位可满足您的需求

位置：绝对

职位：相对

如果您将元素定位为 Relative 并使用如下属性：top、bottom、right、left，z-index。元素会按照自己的默认位置移动

但是如果你定位一个元素为Absolute，这个元素将会从他自己的父亲那里提取出来（不再被认为是父亲的内容）并且如果你使用像top, bottom, left, right 这样的属性你的元素将会根据他的父亲移动第一个non-static父亲

这意味着 CSS 将查找元素父亲，如果父亲有一个位置属性设置为任何值但静态（这是位置的默认值） CSS 将根据以下内容移动元素那个父亲，如果父亲有静态位置，CSS 将查找元素的祖父等等，直到可以找到 non-static 父亲，如果没有找到 CSS 将根据元素定位元素正文元素

现在，您希望将三个项目放在右侧元素中，让我们将它们命名为 .item1 .item2 .item3 您可以将它们的位置设置为绝对位置，并将它们的父亲（右侧）位置设置为相对位置

这样可以使用上、下、左、右和 z-index

将三个项目移动到他们的父亲身上

这是示例

.right{
     position: relative ;
}
.item1,.item2,.item3{
    position: absolute ;
}
.item1{
    left: 50%;
    top: 20px;
}
.item2{
    left: 70%;
    top: 120px;
}
.item3{
    left: 50%;
    top: 220px;
}

（数字仅供参考）

默认情况下，稍后放置在 html 中的元素将出现在 CSS 位置的其他元素之上，您可以使用 z-index 更改和修改此设置规则很简单，数字越大层数越高...

如何添加 position/overlay 这些图像和 div？

How do I add position/overlay these images and a div?

html

css

image