溢出:当位置:绝对时隐藏不工作

Question

我正在尝试构建一个UI组件，其思想是有两个重叠的部分(第一个部分必须包括第二个部分)，并使用一个可拖放的元素展开第一个部分。我提供给你一个演示：

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

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

我查看了StackOverflow上的一些帖子，其中应该在外部<div>元素上使用position:relative;，这在这里不起作用，因为它阻止了position:absolute;

因此，我的问题是，如何使它隐藏时，调整大小，而不重新定位元素在里面。

最里面的<div>是.the-content，外部是.first

Answer 1

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

​

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="covered">
  <div class="second">
    <h3> Clients</h3>
    <img class="logo" src="http://images.all-free-download.com/images/graphicthumb/nike_logo_30021.jpg">
    <img class="logo" src="http://images.all-free-download.com/images/graphicthumb/nike_logo_30021.jpg">
    <img class="logo" src="http://images.all-free-download.com/images/graphicthumb/nike_logo_30021.jpg">
    <img class="logo" src="http://images.all-free-download.com/images/graphicthumb/nike_logo_30021.jpg">
    <img class="logo" src="http://images.all-free-download.com/images/graphicthumb/nike_logo_30021.jpg">
    <img class="logo" src="http://images.all-free-download.com/images/graphicthumb/nike_logo_30021.jpg">
     
  </div>
  
  <div class="handle">
    <span class="left icon-chevron-left"></span>
    <span class="right icon-chevron-right"/></span>
  </div>
  
  <div class="changeable">
    <div class="first">
      <div class="the-content">
        <h3>Partners</h3>
        <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Adidas_Logo.svg/2000px-Adidas_Logo.svg.png">
        <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Adidas_Logo.svg/2000px-Adidas_Logo.svg.png">    <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Adidas_Logo.svg/2000px-Adidas_Logo.svg.png">    <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Adidas_Logo.svg/2000px-Adidas_Logo.svg.png">    <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Adidas_Logo.svg/2000px-Adidas_Logo.svg.png">    <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Adidas_Logo.svg/2000px-Adidas_Logo.svg.png">    <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Adidas_Logo.svg/2000px-Adidas_Logo.svg.png">

      </div>
    </div>
  </div>
</div>

​

Answer 2

看来你在js里的逻辑是错的。你的耐克标识只是因为z索引而不是溢出隐藏的。