如何将粘性定位元素移出父div？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将粘性定位元素移出父div？相关的知识，希望对你有一定的参考价值。
我想将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
答案
就像在评论中提到的那样，只需使用float: right;作为h1并使用负值做一些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>以上是关于如何将粘性定位元素移出父div？的主要内容，如果未能解决你的问题，请参考以下文章