CSSの配置 absolute について

質問

自身の運営するウェブサイトにて、画像の保存・転載を防止したいと考え、以下のjQueryプラグインを導入しようと試みておりますが、自らの知識では解決できない問題が生じたため、お力をお借りできればと思います。
配布元：http://davidwalsh.name/image-protector-plugin-for-jquery
参考：http://www.css-lecture.com/log/javascript/dwimageprotector.html

　このプラグインは画像の上に透過画像の載せることで元画像の保存等を防止するものですが、自身のウェブサイトに導入した結果、下記のページのように透過画像(分かりやすいように色付きの画像で表示しています)が元の画像からズレて表示されてしまいました。適用しているのは記事本文の最初の2枚の画像(800px×531px)と下から2枚目の画像(531px×800px)です。
http://www.disneycolors.net/blog/easter-in-newyork-2013-01.html
　position:absoluteを今まで使用したことがなく、この問題の原因がよくわからずにいます。

　なお、abosoluteに対してtopやleftなどで位置を指定することは理解しています。このjQueryプラグンにおいても配布の段階で
top: position.top,
left: position.left,
position: 'absolute',
　とcss設定されています。

　また、
margin:'706px 0px 0px 410px',
　を加えれば私のブラウザ上では元画像の上にぴったり重なりますが、スマートフォン等で見た場合にはそうはならならいためブラウザに依存しない形で配置したいというのが質問の意図です。

　absoluteであればrelativeを与えた親要素を基準に配置され、このようなブラウザによって異なる表示にはならないと理解しているのですが、imgにrelativeを与えても目的の形にできません。
　解決方法についてご教授をお願い致します。

　この手の質問に対して保存・転載防止はムリ、またそのような考えに対して異を唱える回答がよくなされますが、そのような回答は不要です。
　今回の対策を行っても避けられる方法がいくらでもあることはわかっています。その上で、右クリックやスマートフォンの長押しによる画像の保存、それに伴う無断転載というライトユーザーの行為を防ぎたいという意図です。
　また、画像保存・転載防止についての他の方法の提案も不要です。

回答No.2

warpspace · ベストアンサー

ANo.1の補足です。
配布元のスクリプトを見たところ、透過画像の追加先が決め打ちでbodyになっていますね。
　　.appendTo('body')
これが問題で、元画像の親要素でrelative属性のブロックに追加するように、修正が必要の
ようです。
質問者のHPの構成を十分に調査・理解していないので、申し訳ありませんがアドバイス
できるのはここまでです。がんばってください。

お礼

再度、ご回答頂きありがとうございます。

確かにその部分で追加先を決めるということなので、body以外の適切な要素を指定することで解決ができそうですね。
少し試してみてまだ解決には至りませんでしたが、重要なアドバイスをありがとうございました。

補足

先にお礼を書いてしまったので、こちらで報告させて頂きます。

アドバイスを頂いた部分で要素指定をすることによって、うまく画像にかぶせることに成功しました！
昨晩からずっとわからずに悩んでいた部分だったので大変助かりました。
ありがとうございました。

回答No.3

ORUKA1951

了解しました。(^^)
その画像を含むブロック要素にposition:relative;を指定して、その要素に:afrer{content:"";display:block;width:100%;height:100%;position:absolute;}でよいです。
　これは先の回答、そのままです。jqueryは必要ありません。
★contentで追加される要素は、元要素がblockならblockに指定できます。
★afterは必ず後になるので、同サイズのブロックをかぶせれば利用できなくなります。
★画像要素は内容を持たないため、内容の追加は出来ません。(当たり前ですが)

お礼

ご回答ありがとうございます。

確かにその方法であればPCブラウザでの画像保存は防ぐことはできますが、スマートフォンでの長押しによる保存には対応できませんでした。
長押しによるメニュー表示をオフにする方法は最近のスマートフォンには効かないため、jQueryによる透過画像をかぶせる方法がもっとも目的に沿うと考えています。

私のウェブサイトの場合、スマートフォン等で保存するライトユーザーが非常に多く、これまで無断転載した方を見てもそのような印象が強いため、これをターゲットに考えても保存防止策を講じようとしています。

回答No.1

warpspace

「class="protect"」を指定しているimgタグの、直近の親要素のDivタグに下記のように
relativeを指定したら、解決しませんか？。

<div class="entry"> → <div class="entry" style="position:relative;">

お礼

ご回答ありがとうございました。

アドバイスを頂いたとおり、entryクラスに指定してみましたが、さらに少し上にズレただけで画像の上にはきませんでした。

今の状態はどこが基準点になっているのかわからず、混乱しています…。