将向左浮动 1 步 div 与另一个 div 重叠

Question

我想在宽屏上实现以下效果，将 div 的三角形 div 覆盖在 div 后面的右侧（contenido） class "evento"，我试过使用 position: absolute，但是当 bootstrap 调整列的大小时我不太明白，（请查看整页）：

.triangulo_div{
            display: none;
        }
@media screen and (min-width: 768px) {

.triangulo_div{
                display: block;
                position: absolute;
                left: 15vh;
                top: 7.9vh;
                z-index: 5;
            }
            .triangulo_rectangulo {
                width: 0;
                height: 0;
                text-indent: -9999px;
                border-top: 90vh solid #FE6A04;
                border-right: 50px solid transparent;
            }
     }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" style="background-color: #001143; color: white">
    <div class="container-fluid">
<div class="row">
            <div class="col-sm-1 evento" style="background-color:#FE6A04;">
                BOX
            </div>
            <div id="triangulo_div" class="col-sm-2 triangulo_div"><p class="triangulo_rectangulo">triangulo rectangulo.</p></div>
            <div class="col-sm-2" style="background-color:#06184A;">
                <div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
                    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
                </div>
            </div>
            <div id="contenido" class="col-sm-4 contenido" style="background-color:#4FCCE8;">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
            </div>
            <div class="col-sm-2 menu_siguiente" style="background-color:#06184A;">
                <div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.</div>
            </div>
        </div>
</div>
</div>

编辑：.triangulo_div 加载时必须是 left:calc(16.66666667% * -.08)，但我想在调整大小时将其保留在 .evento 后面

Answer 1

这是给你的一个想法：https://codepen.io/panchroma/pen/owvyoz

CSS 中的重要部分是我已将 triangulo_div 元素的定位从绝对位置更改为相对位置，并且我正在计算左侧偏移量的百分比

@media screen and (min-width: 768px) {

.triangulo_div{
  display: block;
  /*position:absolute; */
  position: relative;
  /*left: 15vh; */
  left:calc(16.66666667% * 2);
  /*top: 7.9vh; */
  z-index: 5;
  }
}

HTML 正是您所拥有的。

16.66666667% 值来自 bootstrap .col-sm-2 的宽度，因此它会随着视口的变化适应更宽或更窄的列宽。

如果您需要添加填充或其他微调，这很容易，例如

left:calc((16.66666667% * 2) + 15px);

我希望这能帮助你摆脱困境！

Answer 2

我设法用 left:-1.1em; 解决了它而不是 left:calc(16.66666667% * -.08).

看起来很简单

将向左浮动 1 步 div 与另一个 div 重叠

Overlay floating 1 step left div with another div

responsive-design

twitter-bootstrap

responsive