溢出：当position：absolute时隐藏不起作用

Question

我正在尝试构建一个UI组件，其中包含2个重叠的部分（第一个必须覆盖第二个部分）并使用可拖动元素展开第一个部分。我正在为您提供演示：

http://codepen.io/LazarGeorgiev/pen/yOPbmx

问题在于，当我调整第一个元素的大小时，我希望元素不会重新定位，为了达到这个目的，我使用了position:absolute;，显然是在制动overflow:hidden;

我检查了StackOverflow上的一些帖子，我应该在外部position:relative;元素上使用<div>，因为它会使position:absolute;

制动<div>

所以我的问题是如何在调整大小时将其隐藏起来而不重新定位内部元素。

P.S。最里面的.the-content是.first，外面是<ModelItem> <Name>Jill & Bob</Name> </ModelItem>

Answer 1

看起来你在js中的逻辑是错误的。您的Nike徽标仅因z-index而隐藏，而不是隐藏的溢出。

Answer 2

你能用固定的吗？如果是，下面的代码应该适合您。

<View style={styles.IndexTableRow,{backgroundColor:'blue'}}>

(function($)
{
    $sectionheight = $('.covered').height();
    $.fn.coveringBad = function(options)
    {
        var settings = $.extend(
        {
            marginY: $sectionheight / 2,
            marginX: 30,
            setX: 30,
            setY: 30,
            direction: "horizontal"
        }, options);
        return this.each(function()
        {
            // Initialization
            ////////////////////////////////
            var $this = $(this),
                $changeable = $this.find('>.changeable'),
                $handle = $this.find('>.handle'),
                width = $this.innerWidth(),
                height = $this.innerHeight(),
                pos_x = null,
                startX = null,
                min_left = settings.marginX,
                max_left = width - settings.marginX,
                min_top = settings.marginY,
                max_top = height - settings.marginY,
                setX = settings.setX,
                setY = settings.setY;
            $changeable.height($this.height());
            if (setX < min_left)
            {
                setX = min_left;
            }
            if (setY < min_top)
            {
                setY = min_top;
            }
            $handle.css('left', setX);
            $handle.css('top', setY);
            // Direction
            //////////////////////////////////
            $changeable.width(setX);
            $changeable.css('border-right', '1px dashed #FFF');
          
            // Dragging Bad
            //////////////////////////////////
            $handle.on('mousedown', function(event)
            {
                event.preventDefault();
                $handle.addClass('draggable');
                pos_x = parseInt($handle.css('left'));
                startX = event.pageX;
            });
            $(document).on('mouseup', function(event)
            {
                $handle.removeClass('draggable');
            });
            $this.bind('mousemove', dragger);

            function dragger(e)
                {
                    var left = pos_x + (e.pageX - startX);
                    if (left < min_left) left = min_left;
                    else if (left > max_left) left = max_left;
                    $('.draggable').css('left', left);
                    if ($('.draggable').length)
                    {
                        $changeable.width(left);
                    }
                }
        });
    }
})(jQuery);
$('.covered').coveringBad();

.covered {
  position: relative;
	width  : 600px;
	height : 400px;
	margin : 50px auto;
	border:1px solid black;
}

.changeable {
  position: static;
  overflow: hidden;
}
.first {
  width:100%;
  height:100%;
  background-color:white;
  overflow:hidden;
}
.the-content{
  position: relative;
  width: 600px;
  padding: 10px;
}
.second{
  position:absolute;
  z-index:-1;
  margin-left:50px;
  padding:10px;
}
.second h3 {
  margin-left:450px;
}
.logo{
  width:70px;
  margin-right:15px;
  margin-bottom:15px;
}
.handle {
	position: absolute;
	width : 46px;
	height: 46px;
	margin-left  : -23px;
	margin-top   : -23px;
	border-radius: 50%;
	background-color: #fff;
	text-align : center;
  cursor:ew-resize;
  z-index:2;
}

.handle span {
	display : inline-block;
	margin : 15px 1px 0;
	color : #000;
	transition : 0.4s ease-out;
}

.handle:hover, .handle:active {
	background-color: #555;
}

.handle:hover span, .handle:active span {
	color : #FFF;
}