HTML/CSSはスティッキー要素にできませんか？

スティッキーな要素の画像を作成しようとしています。しかし、私がそれを機能させるようにしようとすると、単にそのルールに従わないだけです。スティッキープロパティは、ページ上の他のすべての要素に対して機能するので、何が起こっているのかはわかりません。どんな助けもありがとう。HTML/CSSはスティッキー要素にできませんか？

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; 
}

出典

2017-12-06 jonah_johnson

周囲のdiv #imagesがそれに影響を及ぼしています。スティッキープロパティーを#fall_bridgeの代わりに#imagesに適用すると、スティッキープロパティーが機能します（希望の結果が得られた場合）。

少し話題がありましたが、私はdivの中にあなたのウェブフォントを持っていることに気付きましたか？その理由は何ですか？ Divsはあなたのheadタグに入る必要はありません。

出典

2017-12-06 16:03:18

私は年末までに、フォントの多くを持っているつもりですので、私はDIVを必要とする、またはそうでなければ、私はDIVでそれらを置くかどうかはわかりません –

クレイジー取得するつもりです違いが生まれるだろうか？あなたのheadタグにリストされているウェブフォントは、ページに引っ張られ/読み込まれ、DIVでラッピングされても何も変わりません。 DIVは、通常、本文のページレイアウト用です。フォントは、ページ上の位置ではなく、ページ上で使用するためにバックグラウンドで読み込まれます。一部のブラウザではレンダリングされるかもしれませんが、HEADタグにDIVタグを付けるのは有効ではないと思います。 –

周囲を<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>

出典

2017-12-06 16:11:12

HTML/CSSはスティッキー要素にできませんか？

答えて

関連する問題