我無法獲取位置粘貼在標題上

Question

我已經應用位置：粘貼到文章標題元素，但它不起作用。

header { 
width: 25%; 
float: left; 
top: 0; 
position: sticky; 
} 

的codepen在這裏http://codepen.io/cssgrid/pen/7a86f94c7d581f913c43a0c7b512ddb0?editors=1100

Answer 1

這是因爲在.thousand的浮動元素不會被清除，.thousand的高度爲0（除了它的保證金）。所以header沒有什麼可粘性的。

我做了.thousandinline-block的內容，這樣你就不必清除浮動了，而且這似乎工作。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.hero_img { 
 
    height: 50vh; 
 
    width: 100%; 
 
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/429997/1920.jpg); 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-attachment: fixed; 
 
} 
 

 
.thousand { 
 
    max-width: 1000px; 
 
    margin: 0 auto; 
 
    clear: both; 
 
    margin-top: 2.5em; 
 
    padding-top: 2.5em; 
 
} 
 

 
header { 
 
    width: 25%; 
 
    display: inline-block; 
 
    top: 0; 
 
    position: sticky; 
 
    vertical-align: top; 
 
} 
 

 
p { 
 
    width: 75%; 
 
    display: inline-block; 
 
}

<div class="hero_img"></div> 
 

 
<div class="thousand"> 
 
    <header> 
 
    <h2>Some Article Title</h2> 
 
    <h3>12th January 2017</h3> 
 
    </header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia, 
 
    iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam 
 
    aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, 
 
    ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p> 
 
</div> 
 

 
<div class="thousand"> 
 
    <header> 
 
    <h2>Some Article Title</h2> 
 
    <h3>12th January 2017</h3> 
 
    </header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia, 
 
    iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p> 
 
</div> 
 

 
<div class="thousand"> 
 
    <header> 
 
    <h2>Some Article Title</h2> 
 
    <h3>12th January 2017</h3> 
 
    </header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia, 
 
    iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p> 
 
</div>

或者，也可以通過從p元件除去float的它（更高元件）的內部和剛浮header（較短的元件）

給予高度.thousand

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.hero_img { 
 
    height: 50vh; 
 
    width: 100%; 
 
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/429997/1920.jpg); 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-attachment: fixed; 
 
} 
 

 
.thousand { 
 
    max-width: 1000px; 
 
    margin: 0 auto; 
 
    clear: both; 
 
    margin-top: 2.5em; 
 
    padding-top: 2.5em; 
 
} 
 

 
header { 
 
    width: 25%; 
 
    float: left; 
 
    top: 0; 
 
    position: sticky; 
 
} 
 

 
p { 
 
    width: 75%; 
 
    display: inline-block; 
 
}

<div class="hero_img"></div> 
 

 
<div class="thousand"> 
 
    <header> 
 
    <h2>Some Article Title</h2> 
 
    <h3>12th January 2017</h3> 
 
    </header> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia, 
 
    iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam 
 
    aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, 
 
    ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p> 
 
</div> 
 

 
<div class="thousand"> 
 
    <header> 
 
    <h2>Some Article Title</h2> 
 
    <h3>12th January 2017</h3> 
 
    </header> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia, 
 
    iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p> 
 
</div> 
 

 
<div class="thousand"> 
 
    <header> 
 
    <h2>Some Article Title</h2> 
 
    <h3>12th January 2017</h3> 
 
    </header> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia, 
 
    iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p> 
 
</div>