作爲鏈接的CSS絕對背景：活動位置

我正在創建具有頂部鏈接的圖像。圖像已被設置爲相對，而鏈接爲圖像底部的絕對值。基本上它是一個圖像頂部的鏈接，具有絕對位置和固定的widh和height。懸停時，鏈接的背景會改變它的顏色。每當我點擊鏈接時，就會出現問題：它會在圖片頂部（在Opera和IE上它停留在那裏）。圖像作爲示例：

在下面的圖片中是帶有鏈接的圖像的正常狀態（在懸停背景的透明度變化上）。 enter image description here

在這張圖片下面是鏈接的狀態a:active。
作爲鏈接的CSS絕對背景：活動位置

它保留爲絕對元素，但改變它的位置。我已經嘗試申請a:active這些選項：複製一切從正常和懸停狀態，position:static;，甚至試圖放置一個margin-top與所需的大小，以保持在底部 - 沒有運氣。

這裏是它的CSS代碼：

.image-with-link {width:300px; height:135px; position:relative; float:left; overflow:hidden;} 
.image-with-link a {width:280px; height:18px; position:absolute; bottom:20px; left:0; padding:5px 10px; color:#fff; text-align:left; background: rgba(0,0,0,0.3); overflow:hidden;} 
.image-with-link a:hover {background: rgba(0,0,0,0.5);}

（鏈路不再需要）。

來源

2013-07-25 Baseckas

會更容易些，以檢查這個，如果你提供的鏈接網頁本身 – knightrider

聽起來像是你有一些CSS與有衝突：主動申報。正如knightrider所說，看到實際頁面會非常有幫助。 – robooneus

編輯並提供了鏈接，感謝您的幫助。 – Baseckas

你對線79和custom.css的194所覆蓋的絕對定位衝突的CSS：

您聲明：

a:active, a:focus { 
    position:relative; 
    top:1px; 
}

和行194：

.kategorijos .vienas a:active { 
    position:static; 
}

這兩個都是造成這個問題的原因。您希望物品保持position:absolute：活動。

來源

2013-07-25 09:51:20 robooneus

嗨，你用什麼樣的軟件來檢測衝突？因爲我沒有找到任何與custom.css – Baseckas

第79行中的鏈接相關的東西，所以我只使用Chrome的開發工具（右鍵單擊該東西並選擇「檢查元素」）。然後，您可以將鏈接設置爲活動狀態，並查看正在應用哪些樣式。你只需要確保你的CSS：active狀態覆蓋不太特定的CSS。您可以將'！important'添加到更具體的CSS中。 – robooneus

感謝您指出導致問題的原因，我發現它在不同的CSS文件中。既然你的答案是第一位的，我會接受。 – Baseckas

這是你的問題：

a:active, 
a:focus{ 
    /* Give clicked links a depressed effect. */ 
    position:relative; 
    top:1px; 
}

您覆蓋position，但在下面選擇不top：.kategorijos .vienas a。您應該添加top: initial進行修復。我認爲position: static是設計在這裏：

.kategorijos .vienas a:active {position:static;background: url('../images/arrow.png') 270px 4px no-repeat rgba(0,0,0,0.5);}

這使下面的圖片鏈接。

來源

2013-07-25 09:52:22 Saram

謝謝你解釋我做了什麼，沒有被覆蓋。出於好奇，不應該'底：0！重要;'覆蓋'頂'？ – Baseckas

這是不可能由其他覆蓋一個屬性。瀏覽器同時應用，你的元素更高，但內容是頂部對齊 - 所以它上升。嘗試'vertical-align：bottom'（我沒有測試它）。 IMO用'top：initial'覆蓋'top'是更好的解決方案。 – Saram

試試這個，我想這會工作:)

a:active, a:focus { 
    position: relative; 
    top: 1px; 
} 

.kategorijos .vienas a:active { 
    position: static; 
}

來源

2013-07-25 10:08:17

'位置：靜態;'沒有解決Opera和IE的問題，只針對Chrome。 – Baseckas

作爲鏈接的CSS絕對背景：活動位置

回答

相關問題