Question

在我的网站上查看this page和this page。 advert DIV标记中的任何文本都不能被选中。此外，部分文字（尤其是焚化炉产品页面）无法在持有YouTube视频的topic-div元素上方iframe中选择。

以下是相关的HTML：

<div id="topic-div">
        <!--<p style="background-color:rgba(160, 70, 48, 0.25);height:100%;top:0px;">
                Want to try the latest and greatest version of Incinerator? <a href="../downloads/Incinerator.mpkg.zip">Download the 1.2.1 beta version!</a>
        </p>-->
        <p>
            Incinerator is an app that securely erases files from your hard drive with extreme prejudice. It is capable of obliterating pretty much any file in its way - and yours. 
        </p>
        <p>
            <h4>Why Incinerator?</h4>
            <p>When you normally erase a file on your Mac, more often than not, the file can <strong>still be retrieved</strong>. Using professional software, even amateur computer users can find potentially dangerous information on your hard drive, such as sensitive documnts, bills, etc. This is because when you erase a file, the file does not "disappear": the operating system simply marks the data as no longer being used, but the data still remains and is accessible until another file is created that writes over the data that previously was there. This means that special software can hunt for these unused data sections and restore them into files. The following video<sup>*</sup> demonstrates exactly how easy this is:</p>
        </p>
        <p>
            <div class="video-container">
                <iframe width="512" height="512" src="https://www.youtube.com/embed/1Ju8iRE2Ehg" frameborder="0" allowfullscreen></iframe>
            </div>
        </p>
        <p>
            Because of this threat, it is vital that you write over sensitive files before erasing them, so that anybody who tries to access your hard drive and recover the files will find random data, and not anything potentially sensitive. Incinerator can do this job, and it is available on the Mac App Store totally, 100% free.
        </p>
        <p style="display:block; margin-left:auto; margin-right:auto; width:730px;">
            <h3>Screenshots:</h3>
            <a href="javascript:cycleLeft();">&lt;</a>
            <img src="../img/incinerator-window.png" id="rotate-img">
            <a href="javascript:cycleRight();">&gt;</a>
        </p>
        <p>
            <h3>Features:</h3>
                <ul>
                    <li>Scaleable Destruction</li> - Have the program write over your file one time, or a thousand.
                <li>Notifications</li> - Incinerator fully integrates into your OS X desktop, even sending you notifications when your file has been incinerated.
                <li>Super Secure</li>
                <ul>
                    <li>On the App Store</li> - Incinerator is available on the Mac App Store, so you have full confidence in knowing that it has been approved by the makers of OS X itself - the ultimate seal of Mac compatibility.
                    <li>Sandboxed</li> - A new technology, sandboxing allows each app on your Mac to play nicely together, preventing them from doing rogue things like erasing all of your files. Incinerator only has access to the files you open, giving you a sigh of relief.
                    <li>Signed</li> - The official version of Incinerator is signed by my developer ID issued by Apple. This means it runs without warning on your Mac, with the understanding that if something goes wrong, Apple can pull the certificate, preventing the app from running.
                </ul>
                <li>Compatible with <strong>all New Macs</strong></li> - Yes, that new MacBook Air you bought can run Incinerator. :)
            </ul>
        </p>
        <p>
            Need help? Don't hesitate to contact me. I can be reached through <a href="https://github.com/SevenBits" target="_blank">GitHub</a>, or you can <a href="../contact.html">email me</a>.
        </p>
        <p>
            <small><strong>*</strong> - This video and its mentioned commercial software is included as a demonstration to demonstrate the necessity of the product advertised on this page. Its use does not constitute an endorsement of the product contained therein, and I cannot be held resposnsible for any damages that it may incur.</small>
        </p>
    </div>
</div>

和CSS：

.subnav {
    visibility: hidden;
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    height: auto;
    opacity: 0;
    transition: all 0.1s;
    background: #E98D70;
}

.subnav li {
    float: none;
}

.subnav li a {
    border-bottom: 1px solid #2e2e2e;
}

#options:hover .subnav {
    visibility: visible;
    top: 100%;
    opacity: 1;
}

/* Main site */
.float-right {
    float: right;
}

.float-left {
    float: left;
}

#advert {
background-color: rgba(170, 70, 48, 0.75);
}

.main-page-content {
position: absolute;
top: 39px;
left: 0px;
right: 0px;
width: 730px;
z-index:-1;

margin-left: auto;
margin-right: auto;
}

.description {
float:left;
display:block;
}

.on-display {
float:right;
right:25px;
display:inline-block;
}

#topic-div {
margin: 5px;
padding: 5px;

background-color:rgba(170, 70, 48, 0.25);
height:100%;
top:0px;
}

footer {
position: fixed;
bottom: 0;
}

/* YouTube videos */
.video-container {
position: relative;
padding-bottom: 56.25%;
margin: 35px;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

我已经尝试过修改一下CSS了，但是网上关于这个问题的其他答案的所有例子似乎都不适用于我。

这似乎也在一夜之间发生 - 它相对较快地破裂，并停止在OS X上运行最新版本的Safari，Firefox，Chrome和Chromium。

有什么想法吗？

Answer 1

您将.main-page-content的z-index设为-1。这使它低于一切，使其无法选择。

Answer 2

您已为css class =“ main-page-content ”定义了z-index，这正在创建问题。只需删除css属性

z-index:-1; 
//from class main-page-content

它会正常工作，然后用户可以从你的DIV中选择文字

无法选择DIV元素内的文本

2 个答案: