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

Question

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

但不知道该怎么做。我知道我可以通过position: absolute（我这样做是为了获得屏幕截图。）

CSS

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

超文本标记语言

<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重视但没有成功。到目前为止我得到了什么：

我正在使用的codepen： https: //codepen.io/asim-coder/pen/QapgYO

Answer 1

就像评论中提到的那样，只需使用float: right;forh1并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>