在 bootstrap 中对齐重叠的 div
Aligning overlayed divs in bootstrap
我的第一个问题:)
我决定复制重新创建这个首页：
www.liveform.pl
为了在战场上锻炼自己的新技能
这是我的起始页：
http://donkey.ninja/lf/
我很难将红色框与三角形对齐，它们分别是 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;
}
第一部分 "Our newest projects!" 或多或少成立（尽管当我开始调整大小时三角形有它自己的魔力）
但是我在使用 "Who are we?" 和 "What do we do?" 时遇到了问题。
如何定位这些元素，使它们保持粘在特定位置？
1) 我会把你的红框放在它与
相关的 row 元素中
2) 我会在 row 元素上设置 position: relative（这样，红色框的位置将相对于 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>
我的第一个问题:)
我决定复制重新创建这个首页： www.liveform.pl
为了在战场上锻炼自己的新技能
这是我的起始页： http://donkey.ninja/lf/
我很难将红色框与三角形对齐，它们分别是 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;
}
第一部分 "Our newest projects!" 或多或少成立（尽管当我开始调整大小时三角形有它自己的魔力）
但是我在使用 "Who are we?" 和 "What do we do?" 时遇到了问题。
如何定位这些元素，使它们保持粘在特定位置？
1) 我会把你的红框放在它与
相关的row 元素中
2) 我会在 row 元素上设置 position: relative（这样，红色框的位置将相对于 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>