如何定位一個可滾動的DIV的左，右兩側的按鈕

Question

我試圖使角材水平旋轉木馬使用Flex

現在我已經用它滾動內容股利，我只是想將在div的左側和右側的按鈕

，你可以移動的按鈕，甚至到外面

我想要實現這樣的事情：

我附加了一個codepen

https://codepen.io/williamscott701/pen/dWEjQy?editors=1010

<div layout="row"> 
    <div flex></div> 
    <div flex=80 flex-sm=100 flex-xs=100> 

    <div layout="row" style="overflow: auto;" id="myDIV"> 

     <md-button id="left" class="md-button"> << </md-button> 

     <md-button id="right" class="md-button"> >> </md-button> 

     <div ng-repeat="y in [1,2,3,4,5,6,7,8,9,10,11,12,13,2342,234,345,34,545,6111,567,78,69,67]"> 
     <md-card> 
      <md-card-title> 
      <md-card-title-text> 
       <span class="md-headline">Card with image</span> 
       <span class="md-subhead">Large</span> 
      </md-card-title-text> 
      <md-card-title-media> 
       <div class="md-media-lg card-media"></div> 
      </md-card-title-media> 
      </md-card-title> 
      <md-card-actions layout="row" layout-align="end center"> 
      <md-button>Action 1</md-button> 
      <md-button>Action 2</md-button> 
      </md-card-actions> 
     </md-card> 
     </div> 
    </div> 

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

Answer 1

只是一些簡單的CSS。當然，如果你願意，你可以用CSS flexbox來做到這一點。

#myDIV { 
    position: relative; 
} 
#left { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    transform: translateY(-50%); 
} 
#right { 
    position: absolute; 
    top: 50%; 
    right: 0; 
    transform: translateY(-50%); 
}