当卡的外部有溢出 y 时，如何固定卡引导程序内部的位置？

Question

所以我的固定位置有问题......当卡外部有溢出自动时如何修复标题？.outer-card{  padding-right: 20px;  padding-left: 20px;  overflow-y: auto;  display: block;  padding-bottom: 3px;}.card{  width: 1500px  }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/><div class="col-12 col-sm-6 align-items-stretch outer-card">          <div class="card">            <div class="card-body text-center select-year-month">              <div>                <h5 class="card-title text-left">How to set this title not follow overflow so the title with stay in place while i scroll</h5>              </div>              <span>HAHAHAHAHAHA</span>            </div>          </div>        </div>

Answer 1

标题位于内部outer-card，您必须将其移到外部并添加包装 div。然后你可以title使用包装 div 进行绝对定位。

这将为您提供所需的行为。

附上工作片段。

.outer-card{

  padding-right: 20px;

  padding-left: 20px;

  overflow-y: auto;

  display: block;

  padding-bottom: 3px;

}

.card{

  width: 1500px

  }

  

  .container {

    position: relative

  }

  .title{

    position: absolute;

    top: 0px;

    left: 40px;

    max-width: 500px;

    text-overflow: clip;

    overflow: hidden;

    white-space: nowrap;

  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

<div class="col-12 col-sm-6 align-items-stretch outer-card">

          <div class="card">

            <div class="card-body text-center select-year-month">

              <div>

              </div>

              <span>HAHAHAHAHAHA</span>

            </div>

          </div>

        </div>

        <h5 class="card-title text-left title">How to set this title not follow overflow so the title with stay in place while i scroll</h5>

</div>