如何使CSS Sticky与Flex问题配合使用 [英] How to make CSS Sticky work with Flex issue

问题描述

我有一个HTML结构，似乎无法使CSS位置保持粘性.

I have an HTML structure where I can't seem to get the CSS position sticky working.

我认为是因为它在aside容器内.如果我使aside坚持下去，那就行了.

I think it because it's within the aside container. If I make aside stick it works.

我希望.product-info div保持粘性，并且当它碰到div .content-other时，它会不粘连.

I want the .product-info div to be sticky and when it hits the div .content-other it unsticks.

除非使用flex，否则我可以从aside内移出.personal-info和.product-info并使它们彼此靠右放置?喜欢

Unless with flex I could move out .personal-info and .product-info from within the aside and have them sit to the right on top of each other? Like

content | Personal info | Product info

content | Personal info | Product info

然后就不用把包裹放在一边了吗?不确定如何通过flex像这样堆叠这些.

Then not bother having the wrapping aside? Not sure how to stack these like this though with flex.

body {
  padding: 20px;
}

.container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding-bottom: 16px;
  padding-top: 16px;
  width: 100%;
  display: flex;
}

.content {
  position: relative;
  max-width: 100%;
  flex-basis: 74%;
  border: 1px solid black;
  width: 300px;
  margin-right: 20px;
  height: 540px;
}

.right-side {
  align-self: flex-start;
  background-color: #ffffff;
  border: 2px solid #e8e8e3;
  border-radius: 0 4px 4px 4px;
  flex: 1 1;
  flex-basis: 40%;
  min-width: 338px;
  padding: 16px 16px 0;
  display: block;
  width: 400px;
}

.personal-info {
  height: 250px;
}

.product-info {
  position: sticky;
  position: -webkit-sticky;
  top: 24px;
  border: 1px solid red;
}

.content-other {
  width: 100%;
  background: #f5f5f5;
  height: 400px;
}

<div class="container">
  <div class="content">content area here</div>
  <aside class="right-side">
    <div class="personal-info">some info</div>
    <div class="product-info">sticky info</div>
  </aside>
</div>

<div class="content-other">.product-info unsticks when it hits here</div>

欢呼

推荐答案

只需删除align-self: flex-start;

body {
  padding: 20px;
}

.container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding-bottom: 16px;
  padding-top: 16px;
  width: 100%;
  display: flex;
}

.content {
  position: relative;
  max-width: 100%;
  flex-basis: 74%;
  border: 1px solid black;
  width: 300px;
  margin-right: 20px;
  height: 540px;
}

.right-side {
  /*align-self: flex-start;*/
  background-color: #ffffff;
  border: 2px solid #e8e8e3;
  border-radius: 0 4px 4px 4px;
  flex: 1 1;
  flex-basis: 40%;
  min-width: 338px;
  padding: 16px 16px 0;
  display: block;
  width: 400px;
}

.personal-info {
  height: 250px;
}

.product-info {
  position: sticky;
  position: -webkit-sticky;
  top: 24px;
  border: 1px solid red;
}

.content-other {
  width: 100%;
  background: #f5f5f5;
  height: 400px;
}

<div class="container">
  <div class="content">content area here</div>
  <aside class="right-side">
    <div class="personal-info">some info</div>
    <div class="product-info">sticky info</div>
  </aside>
</div>

<div class="content-other">.product-info unsticks when it hits here</div>

这篇关于如何使CSS Sticky与Flex问题配合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！