Question

我正在尝试创建一个粘性元素的图像。但是，当我尝试使其工作时，它根本不遵循这些规则。 sticky属性适用于页面上的每个其他元素，因此我不确定发生了什么。任何帮助将不胜感激。

HTML -

<HTML>
<head>
    <title> Stunning Web Design </title>
    <link rel = 'stylesheet' type = "text/css" href = "main.css">
    <div id = "fonts">
    <link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
    </div>
</head>
<body>
    <div id = "images">
    <img id = "fall_bridge" src = "Photos/fall_bridge.jpg" alt = "Beautiful Paris Photo" width = 1482 height = 720>
    </div>
    <p id = 'backPlate'> </p>
    <h1 id = "mainTitle"> Stunning Web Design </h1>
</body>

我的CSS -

#fall_bridge {
    position: -webkit-sticky; /* safari enabled */
    position: sticky;
    top: 0;
    border: 5px solid white; 
    -webkit-filter: grayscale(100%);
     filter: grayscale(100%);

}

#mainTitle {
    border: 8px double white;
    background-color: rgba(148, 149, 153, .8);
    width: 680px;
    padding: 10px 10px;
    position: relative;
    bottom: 1100px;
    left: 380px;
    color: white;
    font-family: 'Cabin', sans-serif;
    font-size: 100px;
    text-align: center;
}

img {


}

#backPlate {
    position: relative;
    border: 1px solid black;
    width: 1488px;
    height: 500px;
}

Answer 1

周围的div #images正在影响它。如果您将粘性属性应用于#images而非#fall_bridge，则它应该有效（如果这是您想要的结果）。

有点偏离主题，但我注意到你的头脑中有你的网络字体？有什么理由吗？ Div不应该在head标签中。

Answer 2

因为它周围有<div id="images">而没有粘性。使div粘或图像。如果要使图像变粘，请删除div。

#fall_bridge {
  position: -webkit-sticky;
  position: sticky;
  top: 5px;
  border: 5px solid black;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

#mainTitle {
  border: 8px double white;
  background-color: rgba(148, 149, 153, .8);
  width: 680px;
  padding: 10px 10px;
  position: relative;
  bottom: 1100px;
  left: 380px;
  color: white;
  font-family: 'Cabin', sans-serif;
  font-size: 100px;
  text-align: center;
}


#backPlate {
  position: relative;
  border: 1px solid black;
  width: 1488px;
  height: 500px;
}

<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
  <img id="fall_bridge" src="https://images.fineartamerica.com/images-medium-large/fall-bridge-hala-eliya.jpg" alt="Beautiful Paris Photo" width="500px">
<p id='backPlate'> </p>
<h1 id="mainTitle"> Stunning Web Design </h1>

HTML / CSS不能成为一个粘性元素？

2 个答案: