Question

我正在努力将灰色框隐藏在红色框之外。将要隐藏的父项正是开箱即用的部分。如果盒子的一半出来，只有一半的盒子变得不可见。

$( "#right" ).click(function() {
  $( ".block" ).animate({ "left": "+=50px" }, "slow" );
});
 
$( "#left" ).click(function(){
  $( ".block" ).animate({ "left": "-=50px" }, "slow" );
});

 .block {
    position: absolute;
    background-color: #abc;
    left: 50px;
    width: 90px;
    height: 90px;
    margin: 5px;
  }
  
  .big_block {
    
    left: 100px;
    right: 100px;
     background-color: red;
     height: 100px;
     width: 100px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="left">&laquo;</button>
<button id="right">&raquo;</button>
<div class="big_block">

<div class="block"></div>
</div>

将z-index：1添加到big_block类没有帮助因为它使它完全位于顶部

Answer 1

将position:relative添加到big_block并使用overflow:hidden

＆＃13;

$("#right").click(function() {
  $(".block").animate({
    "left": "+=50px"
  }, "slow");
});

$("#left").click(function() {
  $(".block").animate({
    "left": "-=50px"
  }, "slow");
});

＆＃13;

.block {
  position: absolute;
  background-color: #abc;
  left: 50px;
  width: 90px;
  height: 90px;
  margin: 5px;
}

.big_block {
  position: relative;
  left: 100px;
  right: 100px;
  background-color: red;
  height: 100px;
  width: 100px;
  overflow: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="left">&laquo;</button>
<button id="right">&raquo;</button>
<div class="big_block">

  <div class="block"></div>
</div>

＆＃13;

如何使用另一个div

1 个答案: