当卡的外部有溢出 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{&nbsp; padding-right: 20px;&nbsp; padding-left: 20px;&nbsp; overflow-y: auto;&nbsp; display: block;&nbsp; padding-bottom: 3px;}.card{&nbsp; width: 1500px&nbsp; }&nbsp;&nbsp;&nbsp; .container {&nbsp; &nbsp; position: relative&nbsp; }&nbsp; .title{&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 0px;&nbsp; &nbsp; left: 40px;&nbsp; &nbsp; max-width: 500px;&nbsp; &nbsp; text-overflow: clip;&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; white-space: nowrap;&nbsp; }<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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="card-body text-center select-year-month">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>HAHAHAHAHAHA</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <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>