相关疑难解决方法(0)

我有一个非常简单的需求：使和元素粘在屏幕的右侧。

在 Firefox 中一切正常，但在 Chrome 中该right: 0属性被忽略。我说没关系，我可以通过使用来实现我的目标left: calc(100% - 80px);，但这是一个幸运的情况，当我知道粘性元素的宽度时。

然而，后来我感到困惑：虽然上述解决方法按预期工作（elemtn 粘在右侧），但也如此left: 100%;，就此而言，也如此left: 2000%，而没有触发溢出（在 Chrome 和 Firefox 中测试）。我显然错过了一些东西。也许我不明白粘性元素的左右定位，尽管 Firefox 和 Chrome 之间存在明显差异。

left: calc(100% - var(--element-width))完全有道理，但任何人都可以解释一下：为什么被right忽略以及为什么left: 100%并且left: 2000%就此而言也起作用（即，它将元素定位在我期望right: 0放置它的位置，当它应该明显溢出时。）

.wrapper{
  width:100%;
  position:relative;
}
.container{
  height: 2000px;  
}
.floater{
  position:sticky;
  height:200px;
  width:80px;
  background:red;
  top:200px;
  right:0;  
}

<div class="wrapper">
    <div class="container">
      <div class="floater">
        hei!
      </div>
    </div>
</div>

我正在构建一个登录页面,用户首先看到一个主要区域,其下方有一个页脚.向下滚动显示页脚是一个粘性标题,我的目标是使用纯CSS来实现这一点.为了获得主要内容和页脚的全屏外观,我将height属性设置为两个不同的值:92%和8%(使用vh也不起作用).无论height我在我的CSS中指定(不同的单位和所有),我的页脚div都没有坚持.一旦我删除该height属性它就按预期工作.

这是删除属性之前我的页面的屏幕截图height:

正如你所看到的,它并没有坚持:

删除height属性值后,它确实粘贴:

这是我的HTML:

html,
body {
  height: 100%;
  margin: 0;
}

#main {
  height: 92%;
}

#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

#landingContent {
  width: 20vw;
}

#footerNav {
  height: 8%;
  display: flex;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

这是我(可能)相关的CSS:

<div id="main">
  <div id="landing">
    <div id="landingContent">
      <h1 class="logo">Logo</h1> …

我正在试验粘性导航，但遇到了问题。问题是，当我将导航放在其他元素中时，它不再具有粘性。

.nav-wrapper{
  position: absolute; 
  bottom: 0;
}

.nav-wrapper nav{
  position: sticky;
  top: 0;
}

    <div class="nav-wrapper">
     <nav>
      <a href="#"><li>Home</li></a>
      <a href="#"><li>About</li></a>
     </nav>
    </div>

我试图了解CSS的“粘性”功能。我可以让它坚持其父级的“顶部”，而不是其“底部”

我的测试代码是：

.block {
  background: pink;
  width: 50%;
  height: 200px;
}

.move {
  position: sticky;
  bottom: 0;
}

1111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>
<div class="block">
  AAAA
  <div class="move">
    BBBB
  </div>
</div>
222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>

当我将“ move”设置为“ top：0”时，它停留在粉红色块的顶部，但是当我将其设置为“ bottom：0”时，它似乎不再固定/发粘。