如何 position 背景與 CSS html

Question

我怎樣才能把我的背景放在我的代碼的 rest 上。 目前我的代碼覆蓋了導航欄。 我應該將導航欄覆蓋在背景之上，還是應該剪切背景以從導航欄下方開始。 什么是最有效的，我該怎么做？ 請讓我知道我是否應該發布我的導航欄片段，謝謝！

 .wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ffe0af; background-image: linear-gradient( 45deg, #ffdd88 25%, transparent 25%, transparent 75%, #ffdd88 75%, #ffdd88 ), linear-gradient( 45deg, #ffdd88 25%, transparent 25%, transparent 75%, #ffdd88 75%, #ffdd88 ), linear-gradient(45deg, transparent, transparent 50%, #ffc87f 50%, #ffc87f); background-size: 100px 100px; background-position: 0 0, 50px 50px, 50px 0px; -webkit-animation: scroll 5s linear infinite; animation: scroll 5s linear infinite; } @keyframes scroll { from { background-position: 0 0, 50px 50px, 50px 0; } to { background-position: -100px -100px, -50px -50px, -50px -100px; } }.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; position: absolute; top: 50%; }

 <link rel="stylesheet" href= "homebody.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="wrapper"> <button class="button">Hello</button> </div>

Answer 1

我認為您可能有一個固定在頂部或絕對定位的導航欄。 如果是這種情況，也許您需要將 z-index: 10 添加到您的導航欄，它應該可以工作。

而且我看到您在包裝器中使用 position: absolute 。 當您執行此操作時，您的包裝器將脫離 HTML 的流程，並根據其相對父級移動。 在這種情況下，我認為您真的不需要 position 絕對值，因為它應該在 HTML 內的自然 position 上。

如果您願意，可以將您的整個代碼放在一個 codepen 中。 我們可以更好地幫助您！

Answer 2

如果您的意思是導航欄與其后面的較大元素具有相同的背景，這可能是因為您的導航欄根本沒有背景，因此是透明的（其中的文本除外）。 在這種情況下，它后面的任何元素的背景也將在導航欄中可見。

為避免這種情況，您可以為導航欄指定背景——顏色、漸變或圖像，等等。 這將填充導航欄區域，覆蓋其后面其他元素的背景。