Question

我只想尝试将2张或更多Materialise卡堆叠在一起，而不是现在正在做什么，这可以在上面和下面看到：working example我已经尝试使用x和y百分比transform，我尝试flex显示，到目前为止没有运气。

这是我的HTML和轻触：

<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<body>

<div class="container full valign-wrapper">
  <div class="row">

    <div class= "col s12 offset-s6">

      <div id="first_card" class="card large top_position">
        <div class="card-image"> 
          <%= image_tag "hi.png" %> 
          <span class="card-title"></span>
        </div>
        <div class="card-content">
          <p>Welcome to FBA Shipping by ByteStand.
            A super simple way to automate fulfilling FBA items
            in the US and abroad.</p>
        </div>
        <div class="card-action">
          <button id="first_button" class="waves-effect btn stroke-btn tap">Let's Get Started!</button>
        </div>
      </div><!-- end of first card -->


      <div id="second_card" class="card large inner">
        <div class="card-image">
          <%= image_tag "1.png" %> 
          <span class="card-title"></span>
        </div>
        <div class="card-content">
          <p>For $25/month we fulfill an unlimited number of
            orders, so you don't have too.</p>
        </div>
      </div> <!-- end of second card -->

      </div> <!-- end of card columns -->
    </div> <!-- end of main row -->
  </div> <!-- end of container -->

</body>

CSS

.full {
  height: 80vh;
}

.top_position {
  position: absolute;
  z-index: 2;
}

.inner {
  position: absolute;
  z-index: 1;
}

堆叠材料化卡彼此叠加

0 个答案: