我试图理解CSS中的位置粘性

tct7dpnv 于 2023-06-25 发布在其他

关注(0)|答案(5)|浏览(133)

我已经阅读了尽可能多的关于css中位置粘性的内容，但它的行为并不像我期望的那样。有人能解释一下吗
以下是我到目前为止的情况：

#upper {
  width: 200px;
  height: 200px;
  background-color: blue;
}

#middle {
  width: 200px;
  height: 200px;
  background-color: yellow;
  position: sticky;
  left: 100px;
  top: 100px;
}

#lower {
  width: 200px;
  height: 200px;
  background-color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>sticky position</title>
  <link rel="stylesheet" href="sticky.css">
</head>

<body>
  <div id="upper"></div>
  <div id="middle"></div>
  <div id="lower"></div>
</body>

</html>

我所期待的

左上角的蓝色盒子。一个重叠的黄色框（黄色框的左上角重叠蓝色框的右下角）。一个红色的盒子在蓝色的盒子下面，有一个盒子大小的空隙。

发生了什么

蓝色和红色的盒子是我期望的地方。黄色框按预期向右移动，但不垂直移动，也不与蓝色框重叠。

我所发现的

如果我换顶：100;最高：300;在中间的CSS中，黄色框向下移动并与红色框重叠，正如我所期望的那样。

css

来源：https://stackoverflow.com/questions/76523125/i-am-trying-to-understand-position-sticky-in-css

5条答案

按热度按时间

pcrecxhr1#

我想position: absoulte就是你要找的：

#upper {
    width: 200px;
    height:200px;
    background-color:blue;
}
#middle {
    width: 200px;
    height:200px;
    background-color:yellow;
    position:absolute;
    left:100px;
    top:100px;
}
#lower {
    width: 200px;
    height:200px;
    background-color:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sticky position</title>
    <link rel="stylesheet" href="sticky.css">
</head>
<body>
<div id="upper"></div>
<div id="middle"></div>
<div id="lower"></div>
</body>
</html>

赞(0）回复(0）举报 2023-06-25

whhtz7ly2#

你不应该使用位置来粘滞，而应该使用绝对值来解决这个问题。下面是代码：

#upper {
    width: 200px;
    height:200px;
    background-color:blue;
}
#middle {
    width: 200px;
    height:200px;
    background-color:yellow;
    position:absolute;
    left:100px;
    top:100px;
}
#lower {
    margin-top: 200px;
    width: 200px;
    height:200px;
    background-color: red;
}

我还添加了一个200px的顶部边距到红色框，这样有一个空白框，你想要的。
当你滚动网页的时候，你想让一些元素粘在一个位置上，就可以使用位置粘滞。您可能已经注意到，即使您向下滚动，某些网站的导航栏仍然位于页面的顶部，在这种情况下，使用位置粘滞。

赞(0）回复(0）举报 2023-06-25

pbpqsu0x3#

也许您真正想要的是将黄色从包含元素中的自然“流动”位置相对于其他元素定位？这里我使用了-100px的相对位置来实现这一点。
我添加了一个带有背景色的容器，这样你就可以看到三个元素位于那个块中。

.container {
  display: block;
  top: 1;
  left: 1;
  border: solid 1px lime;
  padding: 1em;
  background-color: #FF00FF22;
}

#upper {
  width: 200px;
  height: 200px;
  background-color: blue;
  top: 1;
  left: 1;
}

#middle {
  width: 200px;
  height: 200px;
  background-color: yellow;
  position: relative;
  left: 100px;
  top: -100px;
}

#lower {
  width: 200px;
  height: 200px;
  background-color: red;
}

<div class="container">
  <div id="upper"></div>
  <div id="middle"></div>
  <div id="lower"></div>
</div>

另一个选择是使用display: grid，如下所示：我做了以下的事情：

设置“标准”字体大小为16 px = 1 em
将框大小设置为9 em x 18 em
设置三个原始盒子
添加了一个新的“绿色”框，伸出过去的网格，因为它是在列3和4（4我没有指定，所以它只是自动存在）和行3-5的6行3em每个高度。
设置块是粘性的，但从顶部1 em-所以它停止滚动那里。继续，向上/向下滚动此示例以查看！

body,
* {
  margin: 0;
  padding: 0;
  font-size: 16px;
  box-sizing: border-box;
}

.container {
  position: sticky;
  top: -1em;
  left: 12em;
  margin: 2em;
  display: grid;
  width: 9em;
  height: 18em;
  border: solid 1px lime;
  padding: 1em;
  background-color: #FF00FF22;
  display: grid;
  grid-template-rows: repeat(6, 3em);
  grid-template-columns: 3em 3em 3em;
}

.blocky {
  width: 6em;
  height: 6em;
}

#upper {
  background-color: blue;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

#middle {
  background-color: yellow;
  grid-row: 2 / 4;
  grid-column: 2 / 3;
}

#lower {
  background-color: red;
  grid-row: 5 / 6;
  grid-column: 1 / 2;
}

#green {
  background-color: #00FF0040;
  grid-row: 3 / 5;
  grid-column: 3 / 4;
  border: solid 2px #00FF00;
  z-index: -1;
}

.my-list {
  display: inline-block;
  border: solid 1px blue;
  padding: 3em;
  height: 100vh;
}

<div class="container">
  <div class="blocky" id="upper"></div>
  <div class="blocky" id="middle"></div>
  <div class="blocky" id="lower"></div>
  <div class="blocky" id="green"></div>
</div>
<div class="my-list">
  <ol>
    <li>Set a "standard" font size of 16px = 1em</li>
    <li>Set a box size to 9em by 18em</li>
    <li>Set the three original boxes</li>
    <li>Added a new "green" box that sticks out past the grid since it is in column 3 and 4 (4 I did not specify so it is just there automatically) and rows 3-5 of the 6 rows of 3em each height.</li>
    <li>Set the blocks to be sticky but 1em from the top - so it stops scroll there.</li>
  </ol>
</div>

赞(0）回复(0）举报 2023-06-25

qkf9rpyu4#

您所期望的可以通过将“middle”元素的位置设置为“relative”并更改“top”属性值来完成，如下所示：

#middle {
    position: relative;
    top: -100px;
    /* It should be negative because the initial position (top: 0;) is when the yellow box touches the blue box at the bottom */
}

和“位置：“粘性”在此不适用。

赞(0）回复(0）举报 2023-06-25

vom3gejh5#

我没有发现任何人这样说，但我认为我的问题的答案是：sticky; left、right、top和bottom属性指定元素与指定边缘的 * 最小 * 距离。所以在我的例子中，黄色框的正常位置已经距离视口的顶部边缘超过100个像素，所以它不会垂直移动。但是，正常位置是接触左边缘的，所以它需要向右移动100个像素。这也解释了为什么top：300 px;和我预想的一样

赞(0）回复(0）举报 2023-06-25

我来回答

我试图理解CSS中的位置粘性

我所期待的

发生了什么

我所发现的

5条答案

相关问题

热门标签

最新问答