私が行ったことは、ページの下部に固定divと同じサイズの透明な私のページの下部にdivを作成することです。ユーザーが下にスクロールすると、残りのウェブサイトコンテンツの下に固定divが表示されます。透過divは固定divの前にありますので、ユーザーは固定divの入力ボックスなどをクリックできません。ポインタイベント:なし; Not working
透明なdivにpointer-events: none;
を置くと、ユーザーはそれをクリックすることができますが、残念ながらこれは私の問題を解決していません。透明で固定されたdivをdisplay: block
またはdisplay: inline-block
にしてみましたが、どちらも問題を解決しませんでした。
//empty transparent div
.section.empty-section {
height: 459px;
pointer-events: none;
display: inline-block;
}
//contact form under the transparent div
.section.footer {
background: #131313;
position: fixed;
bottom: 0;
z-index: -1;
}
.section {
position: relative;
padding: 10 10 10 10;
left: 0;
width: calc(100% - 20px);
color: white;
font-family: "Gadugi";
overflow: hidden;
background-size: contain;
background-repeat: no-repeat;
background-blend-mode: soft-light;
}
<div class="section empty-section"></div>
<div class="section footer">
<span class="heading">Contact</span>
<form action="contact.php" method="POST">
<label>Your email address</label>
<br>
<input type="email" name="from-email-address">
<br>
<br>
<label>Your name</label>
<br>
<input type="text" name="from-name">
<br>
<br>
<label>Your message</label>
<br>
<textarea class="email-textbox" name="email-message"></textarea>
<br>
<button class="send-button">Send Email</button>
</form>
</div>
https://gyazo.com/83c3f870aa8c0775ca24cf08de71adcfこれは下部のフォームがクリックできない、私のページのGIFです。
これはおそらく、 'z-index'を' -1'に設定したことによるものです。 'body'と' html'要素はクリックイベントをキャプチャしています。 –
私はdivイベントをクリックするだけでよいはずですが、ポインタイベントをnoneに設定しましたか? – Born2EditHD
あなたはそうですが、あなたは 'body'や' html'をクリックしていません。これらの要素はイベントをキャプチャし、フォームの上にあります。フォームは 'z-index:-1'であるため、「」と「
」の「下」に設定されています。 –