将容器定位为相对固定的[重复]

Question

以下是我希望panel-right 位于类似于position: relative 的固定位置的代码，但问题是当我将position: relative 更改为position: fixed 时，它移动到右侧并且左侧容器已满panel-container 的宽度，而我想要与 position: relative 相同的布局，但只要我滚动页面，只有 panel-right 将固定在其位置，但 UI 保持不变。

代码-

* { box-sizing: border-box; }
body { background: #c3c3c3; }

.green { color: green; }
.blue { color: blue; }
.teal { color: teal; }
.red { color: red; }

.panel-container {
  max-width: 400px;
  margin: 0 auto;
  outline: 1px solid #000;
  display: flex;
  align-items: flex-start;
}


.panel-right {
  border: 1px solid green;
  /* position: fixed; */
  position: relative;
  right: 0;
}

<div class="container">
    <div class="page-title">
      <h3 class="title">This is my Page Heading</h3>
    </div>
    <hr />
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod at maiores perspiciatis libero, assumenda ab ipsum numquam quasi earum! Explicabo perspiciatis, qui rerum dicta eaque error voluptates, tenetur obcaecati nisi necessitatibus, rem ducimus sit, alias cupiditate. Laboriosam sit rerum, dolorum quaerat quibusdam, tempore explicabo fugiat aliquid possimus optio iure totam.
      </p>
    </div>
    <hr />
    <div class="panel-container">
      <div class="panel-left">
        <p class="green">
          <h3>LEFT CONTAINER</h3>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et id, ad est nobis! Expedita aperiam aliquid assumenda placeat blanditiis, error pariatur, amet praesentium nam beatae culpa iusto deleniti, voluptas, nisi?10
        </p>
        <p class="blue">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. In molestiae odit suscipit, tempore nulla voluptatem molestias eos dolorum fuga cupiditate reiciendis veniam, tempora odio esse debitis earum. Fugiat dignissimos perspiciatis sint? In at nemo, eligendi veritatis porro error, corrupti, doloribus consectetur quisquam ipsum officiis officia doloremque pariatur ex laboriosam temporibus quo incidunt beatae suscipit autem! Officiis, sequi necessitatibus quaerat unde quae nesciunt reprehenderit, porro cumque recusandae repudiandae enim a laboriosam.
        <p class="teal">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta nostrum, omnis quidem a quia voluptatem nisi totam enim quasi aliquam eligendi deleniti minima amet officia nemo porro fugit cumque magni nobis sunt voluptatum officiis molestiae facere incidunt! Delectus, dolores totam dolor et debitis assumenda quae quia reprehenderit distinctio aut minima, neque quisquam enim velit aspernatur quibusdam molestiae doloremque iusto. Quae maxime quos aliquid voluptatibus distinctio laboriosam veritatis unde delectus accusantium pariatur veniam facilis hic culpa tempora, at, autem, ex sed inventore nemo omnis saepe. Impedit quaerat necessitatibus, delectus voluptas consectetur! Repellat at autem, eos, fuga impedit exercitationem, id earum perspiciatis vel, odit iure aut ipsa! Et, dolorum quas odit deleniti libero quo magnam. Ad nihil porro, animi, eum commodi labore suscipit consequuntur inventore quas neque eligendi. Omnis obcaecati iure amet quasi unde, pariatur animi nam sequi, necessitatibus aspernatur mollitia facere debitis repellat odit fugiat, atque! Rem optio vero officiis consequatur repellendus illum quas numquam, mollitia beatae magni sunt explicabo fugit molestiae inventore architecto. Sunt harum obcaecati dolorum ut incidunt alias pariatur vel atque quod, deserunt laudantium illo maxime, illum consequatur quasi, perferendis debitis nobis rem sint ex id voluptas magni dicta voluptates. Pariatur earum, tempore eos deleniti esse, eaque ducimus?
        </p>
        <p class="red">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. In deserunt ex rem, ea dicta distinctio doloribus. Accusantium, inventore placeat quis possimus nesciunt molestiae iusto voluptate, excepturi. Eaque necessitatibus fuga, aperiam ab sunt. Error nesciunt quia ipsam laudantium incidunt. Nulla dignissimos distinctio assumenda sunt quas hic magnam veritatis aliquam ipsa repudiandae, eveniet dolore, labore? Iusto enim, aut temporibus quaerat, quidem amet? Saepe impedit, dolores vero nostrum est eveniet officia cum. Porro sunt, magnam, ea possimus quidem ipsum, assumenda dolores similique eius veritatis tempore exercitationem! Porro, asperiores, perferendis. Porro doloremque autem ullam tenetur repudiandae facilis nulla non ea id tempore hic natus impedit accusamus vero tempora modi minus saepe consequatur nihil, amet enim necessitatibus, iste atque! Ipsam earum delectus modi, maxime autem unde voluptatum officiis? Ratione, odio illo corporis sequi minus esse. Cumque quasi recusandae assumenda beatae delectus mollitia quam praesentium nisi voluptas totam deserunt doloremque aspernatur a quod, tempora ut qui esse cupiditate, eos quas voluptatum. Et porro laboriosam unde suscipit expedita sed mollitia repudiandae, esse dicta nisi consectetur harum quidem quaerat optio, sequi commodi placeat cum earum? Illum modi, non quisquam quam repellat nisi magnam fuga soluta ab vero perspiciatis debitis officia rem quas tempora sapiente quia libero illo repellendus! Debitis nihil obcaecati quidem id, praesentium ad iste ipsam quia, optio iusto ab illo dolorum perspiciatis quaerat vel, consequuntur cum accusamus possimus sint! Aut eaque, necessitatibus unde vel, cumque temporibus inventore? Cumque sunt eum, maxime blanditiis ratione accusamus nemo nulla fugit tempore in suscipit delectus eveniet. Consectetur, optio error molestias similique quisquam accusamus autem at consequuntur, quo repudiandae commodi a. Sit quae, consequatur, quia cumque porro ducimus cum sint eveniet quidem! Autem a consectetur nulla repudiandae aperiam, adipisci fugiat perspiciatis rerum tenetur rem. A dolores cumque exercitationem nihil iusto fugit numquam repellendus, dolore inventore ratione illo quidem culpa, quo, dolorem.
        </p>
      </div>
      <div class="panel-right">
        <ul>
          <li>RIGHT CONTAINER</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 6</li>
        </ul>
      </div>
    </div>
  </div>

dscdsfs

Answer 1

* { box-sizing: border-box; }
body { background: #c3c3c3; }

.green { color: green; }
.blue { color: blue; }
.teal { color: teal; }
.red { color: red; }

.panel-container {
  max-width: 400px;
  margin: 0 auto;
  outline: 1px solid #000;
  display: flex;
  align-items: flex-start;
}


.panel-right {
  border: 1px solid green;
  /* position: fixed; */
  position: sticky; /* new stuff */
  top: 0;           /* new stuff */
  right: 0;
}

<div class="container">
    <div class="page-title">
      <h3 class="title">This is my Page Heading</h3>
    </div>
    <hr />
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod at maiores perspiciatis libero, assumenda ab ipsum numquam quasi earum! Explicabo perspiciatis, qui rerum dicta eaque error voluptates, tenetur obcaecati nisi necessitatibus, rem ducimus sit, alias cupiditate. Laboriosam sit rerum, dolorum quaerat quibusdam, tempore explicabo fugiat aliquid possimus optio iure totam.
      </p>
    </div>
    <hr />
    <div class="panel-container">
      <div class="panel-left">
        <p class="green">
          <h3>LEFT CONTAINER</h3>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et id, ad est nobis! Expedita aperiam aliquid assumenda placeat blanditiis, error pariatur, amet praesentium nam beatae culpa iusto deleniti, voluptas, nisi?10
        </p>
        <p class="blue">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. In molestiae odit suscipit, tempore nulla voluptatem molestias eos dolorum fuga cupiditate reiciendis veniam, tempora odio esse debitis earum. Fugiat dignissimos perspiciatis sint? In at nemo, eligendi veritatis porro error, corrupti, doloribus consectetur quisquam ipsum officiis officia doloremque pariatur ex laboriosam temporibus quo incidunt beatae suscipit autem! Officiis, sequi necessitatibus quaerat unde quae nesciunt reprehenderit, porro cumque recusandae repudiandae enim a laboriosam.
        <p class="teal">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta nostrum, omnis quidem a quia voluptatem nisi totam enim quasi aliquam eligendi deleniti minima amet officia nemo porro fugit cumque magni nobis sunt voluptatum officiis molestiae facere incidunt! Delectus, dolores totam dolor et debitis assumenda quae quia reprehenderit distinctio aut minima, neque quisquam enim velit aspernatur quibusdam molestiae doloremque iusto. Quae maxime quos aliquid voluptatibus distinctio laboriosam veritatis unde delectus accusantium pariatur veniam facilis hic culpa tempora, at, autem, ex sed inventore nemo omnis saepe. Impedit quaerat necessitatibus, delectus voluptas consectetur! Repellat at autem, eos, fuga impedit exercitationem, id earum perspiciatis vel, odit iure aut ipsa! Et, dolorum quas odit deleniti libero quo magnam. Ad nihil porro, animi, eum commodi labore suscipit consequuntur inventore quas neque eligendi. Omnis obcaecati iure amet quasi unde, pariatur animi nam sequi, necessitatibus aspernatur mollitia facere debitis repellat odit fugiat, atque! Rem optio vero officiis consequatur repellendus illum quas numquam, mollitia beatae magni sunt explicabo fugit molestiae inventore architecto. Sunt harum obcaecati dolorum ut incidunt alias pariatur vel atque quod, deserunt laudantium illo maxime, illum consequatur quasi, perferendis debitis nobis rem sint ex id voluptas magni dicta voluptates. Pariatur earum, tempore eos deleniti esse, eaque ducimus?
        </p>
        <p class="red">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. In deserunt ex rem, ea dicta distinctio doloribus. Accusantium, inventore placeat quis possimus nesciunt molestiae iusto voluptate, excepturi. Eaque necessitatibus fuga, aperiam ab sunt. Error nesciunt quia ipsam laudantium incidunt. Nulla dignissimos distinctio assumenda sunt quas hic magnam veritatis aliquam ipsa repudiandae, eveniet dolore, labore? Iusto enim, aut temporibus quaerat, quidem amet? Saepe impedit, dolores vero nostrum est eveniet officia cum. Porro sunt, magnam, ea possimus quidem ipsum, assumenda dolores similique eius veritatis tempore exercitationem! Porro, asperiores, perferendis. Porro doloremque autem ullam tenetur repudiandae facilis nulla non ea id tempore hic natus impedit accusamus vero tempora modi minus saepe consequatur nihil, amet enim necessitatibus, iste atque! Ipsam earum delectus modi, maxime autem unde voluptatum officiis? Ratione, odio illo corporis sequi minus esse. Cumque quasi recusandae assumenda beatae delectus mollitia quam praesentium nisi voluptas totam deserunt doloremque aspernatur a quod, tempora ut qui esse cupiditate, eos quas voluptatum. Et porro laboriosam unde suscipit expedita sed mollitia repudiandae, esse dicta nisi consectetur harum quidem quaerat optio, sequi commodi placeat cum earum? Illum modi, non quisquam quam repellat nisi magnam fuga soluta ab vero perspiciatis debitis officia rem quas tempora sapiente quia libero illo repellendus! Debitis nihil obcaecati quidem id, praesentium ad iste ipsam quia, optio iusto ab illo dolorum perspiciatis quaerat vel, consequuntur cum accusamus possimus sint! Aut eaque, necessitatibus unde vel, cumque temporibus inventore? Cumque sunt eum, maxime blanditiis ratione accusamus nemo nulla fugit tempore in suscipit delectus eveniet. Consectetur, optio error molestias similique quisquam accusamus autem at consequuntur, quo repudiandae commodi a. Sit quae, consequatur, quia cumque porro ducimus cum sint eveniet quidem! Autem a consectetur nulla repudiandae aperiam, adipisci fugiat perspiciatis rerum tenetur rem. A dolores cumque exercitationem nihil iusto fugit numquam repellendus, dolore inventore ratione illo quidem culpa, quo, dolorem.
        </p>
      </div>
      <div class="panel-right">
        <ul>
          <li>RIGHT CONTAINER</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 6</li>
        </ul>
      </div>
    </div>
  </div>