将绝对定位的div移出父元素

Question

有没有可能将绝对定位的 div 移动到父元素的边界之外？

我尝试了 (less) left:calc(~'0%-15px') 但似乎不起作用 :)

.dif-links {
    background: pink; width: 25px; height: 100px; 
    position: absolute; text-align: center;
    left:calc(~'0%-15px')
}

我有一篇文章，想让“分享”div保持在文章主体外面，所以我使用了绝对定位，但是现在将其移动到父元素的左侧似乎很复杂...

这里是我的笔

- serge

---

使用 margin-left:-15px;。 - nelek

Answer 1

假设父元素是其包含块（例如具有 position: relative），最简单的方法是：

position: absolute;
right: 100%;

#wrapper {
  position: relative;
  background: yellow;
  margin: 0 50px;
  height: 50px;
}
#inner {
  position: absolute;
  right: 100%;
  border: 2px solid red;
}

<div id="wrapper">
  <div id="inner">Foo</div>
</div>

- Oriol

---

100% 它占据整个屏幕。 - serge

@Serge 不确定你是否指的是屏幕外。如果父元素不是包含块，那么就会发生这种情况。 - Oriol

好的，那么我应该将父元素的位置修改为相对定位...如果可能的话。 - serge

Answer 2

只需将margin-left设置为-25px即可。

- Kerim Incedayi

---

@Serge 我刚刚在你的代码示例中测试了一下，它正常工作（??!!），你不需要那个left:...。使用margin-left并给定所需的负值像素即可。 - nelek

绝对定位已从页面流中移除。将其从父容器中移动应该没有问题。 - yaakov

我测试了正边距，没有看到差别，但是用负边距现在看到了！ :) - serge

Answer 3

以下 CSS 看起来像你预期的那样工作。我没有使用 calc() 方法，但我相信现在你可以调整它以适应你的需求。

.dif-links {
  background: pink;
  width: 25px;
  height: 100px;
  position: absolute;
  text-align: center;left:365px;
}

希望这有所帮助！

愉快的编程。

- DevCod

---

如果窗口被调整大小，"硬编码"的位置将会失效。 - serge

Answer 4

我已经尝试过这样，请检查一下，

.dif-links{
background: pink; width: 25px; height: 100px; position: absolute; text-align: center;left:-15px; top:0;}

.container {    
    width: @w;
    height: calc(~'100% - '@h);
    background: yellow;
    margin: 0 auto;
    border-collapse: collapse;
    margin-top: @h;
  position:relative;
} 

- riazshah