3

コンテナー内で画像リンクが機能しない理由を教えてください (画像は右側の白い三角形です)。このブロックの外でも問題なく動作することに注意してください。ありがとう ここに画像の説明を入力

CSS:

.block {
    position: relative;
    display: block;
    clear: both;
    overflow: hidden;
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
    width: 100%;
}

.block img {
    float: right;
    margin-left: 40px;
}
4

6 に答える 6

1

この CSS を追加すると、問題が解決するはずです。

.arrow-circle{
   position:relative;
   z-index: 9999;
}
于 2013-10-06T18:05:59.220 に答える
0

私はクロムの検査要素を使用してこれを行いました..そしてリンクは機能しました...

#touchPointContainer {
position: relative;
height: 600px;
pointer-events: none;
}
于 2013-10-06T18:03:54.030 に答える
0

.block の位置は相対的なので、z-index の問題ではないと思います。ただし、与えられた情報が非常に少ないため、問題を指摘するのは難しい..いくつかの詳細またはjsfiddleリンクを提供する

于 2013-10-06T18:03:54.793 に答える
0

ブロックが画像に現れていると思います.画像の z-index を非常に高く設定してください。またはこれを行います。

.block {
    position: relative;
    display: block;
    clear: both;
    overflow: hidden;
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
    width: 100%;
pointer-events:none;
}
于 2013-10-06T17:54:36.697 に答える
0

あなたの問題は、 #touchPointContainer がボタンの上に配置されていることです。提案された「ポインター イベント: なし;」解決策は、広くサポートされていない Firefox ハックです。

z-index ソリューションは正しいものでしたが、z-index を機能させるには、要素に position:relative を追加する必要があるため、Gurpreet Singh はそれを釘付けにしました。

于 2013-10-06T18:10:49.670 に答える
0

Z インデックスが適用されるように、画像に配置コンテキストを指定する必要があります。

.block img {
float: right;
margin-left: 40px;
    position:relative;
    z-index: 100; /* probably any number more than 1 will do */
}
于 2013-10-06T18:10:55.790 に答える