我无法在 header 上工作

Question

我已将 position: sticky 应用到文章 header 元素，但它不起作用。

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

代码笔在这里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>

我无法在 header 上工作

I can't get position sticky to work on a header

css

sticky