위치를 적용했습니다 : articles 머리글 요소에 고정되어 있지만 작동하지 않습니다.머리글에서 작동하도록 위치를 고정시킬 수 없습니다.
header {
width: 25%;
float: left;
top: 0;
position: sticky;
}
codepen 여기 http://codepen.io/cssgrid/pen/7a86f94c7d581f913c43a0c7b512ddb0?editors=1100
그것은 .thousand에 떠 요소가 삭제되지 않습니다 있기 때문에이다, .thousand의 높이 (옆으로는 마진의에서) 0입니다. 그래서 header은 끈적 거리지 않습니다.
나는 float를 삭제할 필요가 없도록 .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>