将绝对div移到父级之外

Question

是否可以将绝对定位的div移到父母的边界之外？

我尝试过（少）left:calc(~'0%-15px')，但似乎无法工作：）

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

我有一篇文章，我想保持＆＃34;分享＆＃34; div outisde文章正文，这就是我使用绝对位置的原因，但现在只是把它移到父母的左侧似乎很复杂......

以下是my pen

Answer 1

只需设置-25px左边距。

Answer 2

假设父级是其包含的块（例如有- (void) tapAndSlide: (UILongPressGestureRecognizer*) gesture { CGPoint touchPoint = [gesture locationInView: self]; CGRect trackRect = [self trackRectForBounds: self.bounds]; CGFloat thumbWidth = [self thumbRectForBounds: self.bounds trackRect: trackRect value: self.value].size.width; CGRect trackArea = CGRectMake(trackRect.origin.x, 0, trackRect.size.width, self.bounds.size.height); CGFloat value; if (CGRectContainsPoint(trackArea, touchPoint)) { if (touchPoint.x <= trackArea.origin.x + thumbWidth/2.0) { value = self.minimumValue; } else if (touchPoint.x >= trackArea.origin.x + trackArea.size.width - thumbWidth/2.0) { value = self.maximumValue; } else { CGFloat percentage = (touchPoint.x - trackArea.origin.x - thumbWidth/2.0)/(trackArea.size.width - thumbWidth); CGFloat delta = percentage*(self.maximumValue - self.minimumValue); value = self.minimumValue + delta; } if (value != self.value) { if (gesture.state == UIGestureRecognizerStateBegan) { [UIView animateWithDuration: 0.2 delay: 0 options: UIViewAnimationOptionCurveEaseInOut animations: ^{ [self setValue: value animated: YES]; } completion: ^(BOOL finished) { [self sendActionsForControlEvents: UIControlEventValueChanged]; }]; } else { [self setValue: value animated: YES]; [self sendActionsForControlEvents: UIControlEventValueChanged]; } } } else { if (gesture.state == UIGestureRecognizerStateBegan) { if (touchPoint.x <= trackArea.origin.x) { if (self.value == self.minimumValue) return; value = self.value - 1.5; } else { if (self.value == self.maximumValue) return; value = self.value + 1.5; } CGFloat duration = 0.1; [UIView animateWithDuration: duration delay: 0 options: UIViewAnimationOptionCurveEaseInOut animations: ^{ [self setValue: value animated: YES]; } completion: ^(BOOL finished) { [self sendActionsForControlEvents: UIControlEventValueChanged]; }]; } } } ），最简单的方法是

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;
}

Answer 3

以下css似乎与您预期的一样。我没有使用calc（）方法，但我相信你现在可以调整它以满足你的需要。

.dif-links {background：pink;宽度：25px;身高：100px;位置：绝对; text-align：center; left：365px;}

希望这有帮助！

快乐造型。

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;
}