html - 如何将粘性定位元素移出父 div？

Question

我想将 position: sticky 元素移动到父元素的最右侧，然后再次移出该元素。就像这张图片:

但是不知道怎么做。我知道我可以通过 position: absolute 实现这一点(我这样做是为了获取屏幕截图。)

CSS

h1 {
  position:-webkit-sticky;
  position: sticky;
  top: 10px;
  left: 100%;
  

HTML

<div>
    <p>Apparat</p>
    <p>Arcade Fire</p>
    <p>Same</p>
    <h1>Andrew W.K.</h1>
    <p>At The Drive-In</p>
    <p>Same`</p>
    <p>Chromeo</p>
    <p>Common</p>
    ....

我尝试了 left: 110% 和 px 值，但没有用。到目前为止我得到了什么:

我使用的代码笔:https://codepen.io/asim-coder/pen/QapgYO

Answer 1

就像评论中提到的那样，只需对 h1 使用 float: right; 并用负值做一些 margin-right 。

h1 {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  /* left: 100%; No need of this anymore */
  /* Other styles   */
  background: green;
  color: white;
  line-height: 2em;
  margin: 0 -100px 0 0; /* Changed to -100px right and 0 on the other sides*/
  padding: 5px;
  display: inline-block;
  float: right;
}


/* Other styles */

* {
  box-sizing: border-box;
}

body {
  font: bold 18px/21px Helvetica, Arial, sans-serif;
}

p {
  font-weight: normal;
  background: orange;
  padding: .8em;
  margin: 0;
}

div {
  width: 500px;
  margin: auto;
  border: 1px solid orange;
  position: relative;
}

<div>
  <p>Apparat</p>
  <p>Arcade Fire</p>
  <p>Same</p>
  <h1>Andrew W.K.</h1>
  <p>At The Drive-In</p>
  <p>Same`</p>
  <p>Chromeo</p>
  <p>Common</p>
  <p>Converge</p>
  <p>Crystal Castles</p>
  <p>Same`</p>
  <p>Ted Leo & The Pharmacists</p>
  <p>T-Pain</p>
  <p>Chromeo</p>
  <p>Common</p>
  <p>Converge</p>
  <p>Crystal Castles</p>
  <p>Same`</p>
  <p>Ted Leo & The Pharmacists</p>
  <p>T-Pain</p>
  <p>Thrice</p>
  <p>TV On The Radio</p </div>