Question

我的第一个问题：）

我决定复制重新创建这个头版： www.liveform.pl

为了在战场上练习我的新技能。

我很难将红色框与三角形对齐，它们分别是div（矩形）和p（三角形），看起来像这样：

.ontop1 {
position: absolute;
top: 94%;
bottom: 0;
left: 42%;
right:0;
z-index: 99999;
width: 300px;
height: 60px;
pointer-events:none;
background-color: rgba(255, 0, 72, 1);
padding-top: 11px;
}

.triangle1 {
position: absolute;
top: 98.8%;
bottom: 0;
left: 48%;
right:0;
z-index: 99999;
width: 0;
height: 0;
text-indent: -9999px;
border-right: 40px solid transparent;
border-top: 40px solid rgba(255, 0, 72, 1);
border-left: 40px solid transparent;
}

第一部分是“我们最新的项目！”或多或少保持（虽然三角形在我开始调整大小时会发挥自己的魔力）

但是我遇到了“我们是谁？”的问题。和“我们做什么？”。

我如何定位这些元素以便它们仍然粘在某个地方？

Answer 1

1）我会把你的红色框放在与它相关的row元素中

2）我会在position: relative元素上设置row（这样，红色框会相对于row位置）

3）我会在红色框上设置一个top: -60px（箭头上的类似内容），将其略微移动到row

上

4）我会在红色框上设置一个left: 50%和margin-left: -150px（红色框的宽度的一半）（箭头上的类似物），使其水平居中。 left: 0; right: 0; margin: auto;也可能有用;

将箭头和方框放入单个元素中可能更容易，并且更改单个元素的位置而不是这两个元素的位置。

编辑：例如：<div class="arrow-title"><p class="ontop1">Our newest projects!</p><p class="triangle1"></p></div>

在引导程序中对齐重叠的div

1 个答案: