2017-04-26 131 views
0

我想給位置固定下面的div。但是,當我添加位置:固定到CSS的元素就消失了。任何建議都會被處理。謝謝!固定在div元素上的位置

維多利亞

腹板和代碼下面

http://vtwg.eu/ZMT/untitled3.html

<div id="book-now"> 
<a href="mailto:[email protected]?subject=Music_Tours"><img 
src="book_now.png" alt="" width="90"></img></a> 
</div> 


#book-now{ 

background-image: url("back_2.png"); 
background-repeat: repeat; 
text-align: right; 
padding-right: 60px; 
padding-top: 40px; 
} 
+0

你想獲得它被固定在同一個地點無論你在哪裏滾動或做你想讓它右側的滑塊下方? – Keith

+0

嗨,我希望物體能夠在滑塊的正下方...並且當你向下滾動時,你會一直看到它。我是否正確回答你的問題?如果有一個更容易的解決方案,我打開建議:)。謝謝!!!!!! –

+0

你只想把黃色的圖像圖像修好嗎?沒有這個黑暗的背景?那麼我會建議刪除書fondo和現在預訂div,並只對包含圖像的鏈接進行定位。 with:position:fixed;頂部:250px(或多或少);正確:0; –

回答

0

固定元件是在瀏覽器fixed。你必須定義,你想讓它通過給它的值topright財產被固定

position:fixed; 
    top: 100px; 
    right: 100px; 
+0

@OlivierKrull請澄清是什麼問題? 。你希望它是固定的。它必須在某處**被修復。你想要什麼樣的最終結果,你能澄清一下嗎? –

+0

沒問題的人,我只是同意你的答案。 (我沒有問這個問題)。 –

+1

@OlivierKrull對不起。我認爲這是你最初的想法,你想要一個更好的。 –

0

如果一個元素有固定的位置,你必須定義不僅與設置位置topbottomleftright(默認值是窗口的左上角),但也是widthheight - 否則它將具有零寬度和高度,因此保持不可見狀態。

另外:它有所有4位設置(topbottomleftright),你並不需要的寬度和高度,因爲這些都是由這些位置定義的位置設置。

一個例子:

.x { 
 
    position: fixed; 
 
    top: 60px; 
 
    left: 100px; 
 
    width: 160px; 
 
    height: 120px; 
 
    background-image: url("http://placehold.it/60x40/fa7"); 
 
    background-repeat: repeat; 
 
    text-align: right; 
 
    }
<div class="x"></div>

,沒有寬度和高度設置(即不可見):

.x { 
 
    position: fixed; 
 
    top: 60px; 
 
    left: 100px;; 
 
    background-image: url("http://placehold.it/60x40/fa7"); 
 
    background-repeat: repeat; 
 
    text-align: right; 
 
    }
<div class="x"></div>

+0

感謝Johannes,也有幫助的信息! –

+0

嗨!不幸的是,客戶希望將這個對象從頂部放置到700像素,顯然當我做這個對象時就會消失......任何線索爲什麼......它似乎發生在頂部的任何位置:600px:/ –

+0

它不會消失在這裏與頂部700px ... – Johannes

0

當使用位置:固定,它用於瀏覽器窗口。 您需要放置頂部,左側,右側或底部值。 如:

#book-now{ 
    position: fixed; 
    top: 50px; 
    left: 50px; 
    background-image: url("back_2.png"); 
    background-repeat: repeat; 
    text-align: right; 
    padding-right: 60px; 
    padding-top: 40px; 
} 
+0

嗨尼娜,非常感謝您的答案!它也解決了! :) –