CSS: позиция: абсолютная кадрирования внутри не ближайший перелив: скрытый родительский

Question

У нас есть карусельный код вроде этого:

<div style="width:280px; height:100px; border:1px solid red; overflow:hidden; "> 
    <ul> 
     <li style="position:relative; width:200px; height:50px; list-style-type:none; background:yellow;"> 
      <div style="position:absolute; top:10px; left:10px; width:180px; height:150px; background:Pink; z-index: 99;"> 
       <br/> 
      </div> 
     </li> 
    </ul> 
</div> 

Последнего ДИВ, который позиционируется абсолютным, является обрезка. Есть ли способ сделать это, работает нормально, изменяя только код ccs?

Answer 1

Если вы не хотите, чтобы удалить overflow: hidden, то это нормально для вас, чтобы удалить position:relative для внутренней li и это какой-то новый внешнего DIV и добавить соответствующие верхние и левое значение розового DIV, как показано ниже.

<div style="position:relative"> 
    <div style="width:280px; height: 100px; border:1px solid red; overflow:hidden; "> 
     <ul> 
      <li style="/* removed position:relative; */ width:200px; height:50px; list-style-type:none; background:yellow;z-index: 3;"> 
       <div style="position: absolute; top: 30px; left: 52px; width:180px; height:150px; background:Pink; z-index: 99;"> 
        <br> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div> 

Это единственный способ, которым я мог бы выяснить!

Answer 2

вы дали overflow:hidden к главному div, который имеет width:280px

и поэтому последняя div с position:absolute становится отрубили.

Answer 3

<div style="width:280px; height:100px; border:1px solid red; /* removed overflow:hidden; */ "> 
    <ul> 
     <li style="position:relative; width:200px; height:50px; list-style-type:none; background:yellow;"> 
      <div style="position:absolute; top:10px; left:10px; width:180px; height:150px; background:Pink; z-index: 99;"> 
       <br> 
      </div> 
     </li> 
    </ul> 
</div>