Question

我有一个HTML页面，它只包含整个页面的图像，并使用nivo滑块进行滑动。我需要放置div以使图像的某些部分成为可点击的图像（所有滑动图像在同一位置具有可点击部分）。问题是视图端口下方的div。所以我无法使用顶部：一些％;做出回应。当用户缩小宽度时，nivo滑块可调整高度。

但是div并没有在正确的地方进行点击。

我尝试了max-height：100％也是。

你知道如何将div维持在同一个地方甚至nivo滑块调整高度吗？

我使用了以下代码。

<!DOCTYPE html>
<html class="no-js" lang="en">
 <head>

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta name="robots" content="index,follow">
<link href="css/global.css" rel="stylesheet" type="text/css">
<link href="css/nivo-slider.css" rel="stylesheet" type="text/css">
<link href="css/default/default.css" rel="stylesheet" type="text/css">
<title>Test</title>
  </head>
  <body>


<div id="wrapperone">
    <div id="wrappertwo">
        <div id="mailcon" class="contnetholder">&nbsp;</div>
        <div id="instacon" class="contnetholder">&nbsp;</div>
        <div id="twtrcon" class="contnetholder">&nbsp;</div>
        <div id="facebookcon" class="contnetholder">&nbsp;</div>
        <div id="contentwrapper">

            <div class="slider-wrapper theme-default">
                <div id="slider" class="nivoSlider">
                    <img src="images/sliderimages/slider1.jpg" data-thumb="images/sliderimages/slider1.jpg" alt="" />
                    <img src="images/sliderimages/slider2.jpg" data-thumb="images/walle.jpg" alt="" />
                    <img src="images/sliderimages/slider3.jpg" data-thumb="images/nemo.jpg" alt=""  /> 
                    <img src="images/sliderimages/slider4.jpg" data-thumb="images/nemo.jpg" alt="" />  
                </div>

            </div>
        </div>

    </div>
</div>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
 <script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
  <script type="text/javascript">
  function isIE () 
  {
        var myNav = navigator.userAgent.toLowerCase();
        return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
    }
    if (isIE()) {
        if (isIE () < 9) 
            {
                $("#browserbar").show();
            } 
    } 

        $(window).load(function() {
            $('#slider').nivoSlider(
            {   
                effect: 'fade',   
                pauseTime: 20000,
                animSpeed: 2500, 
                directionNav: false, 
                randomStart: true,
                controlNav: false,              
                controlNavThumbs: false,        
                pauseOnHover: false,            
                manualAdvance: false,
            });

        });
</script>

下面的CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, textarea {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    font-size: 12px;
    font-weight: normal;
    line-height: normal;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: top;
}
b, strong {
    font-weight: bold;
}
i {
    font-style: italic;
}
ol, ul {
    list-style: none outside none;
}
blockquote, q {
    quotes: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a, span {
    vertical-align: baseline;
}
header, nav, section, article, aside, footer {
    display: block;
}
html, body {
    height: 100%;
    width: 100%;
}
body {
    background: url("../images/bg.png") repeat scroll left top #F2F2F2;
    /*background-color:#000;*/
    color: #3E3E3E;
    font: 12px "Arial",Arial,Helvetica,sans-serif;
}
#browserbar
{
    background-color:#FF9900;
    width:100%;
    height:30px;
    color:#FFF;
    text-align:center;
    font-weight:bold;
    padding:1%;
}
#wrapperone {
    min-height: 100%;
    overflow: hidden;
}

#wrappertwo{
 /* background: url("../images/bodyContent.gif") repeat scroll 50% 0 rgba(0, 0, 0, 0);
  box-shadow: 0 0 10px #000000;
  margin: 0 auto;
  overflow: hidden; */
  width: 100%;

}
.contnetholder
{
    border:3px solid #FFF;
    position:absolute;
}

#mailcon
{
    top:795px;
    left:7%;
    width:120px;
    border-color:red;
    z-index:1005;
    cursor:pointer;
}

#instacon
{
    top:854px;
    left:9%;
    width:23px;
    border-color:red;
    z-index:1005;
    cursor:pointer;
    height:20px;
}
#twtrcon
{
    top:854px;
    left:11%;
    width:23px;
    border-color:red;
    z-index:1005;
    cursor:pointer;
    height:20px;
}
#facebookcon
{
    top:854px;
    left:13%;
    width:23px;
    border-color:red;
    z-index:1005;
    cursor:pointer;
    height:20px;
}

@media all and (min-width: 980px) and (max-width: 1200px){
#mailcon
{
    top:575px;
    left:7%;
    width:90px;
    border-color:red;
    z-index:1005;
    cursor:pointer;
}

#instacon
{
    top:620px;
    left:9%;
    width:17px;
    border-color:red;
    z-index:1005;
    cursor:pointer;
    height:17px;
}
#twtrcon
{
    top:620px;
    left:11%;
    width:17px;
    border-color:red;
    z-index:1005;
    cursor:pointer;
    height:17px;
}
#facebookcon
{
    top:620px;
    left:13%;
    width:17px;
    border-color:red;
    z-index:1005;
    cursor:pointer;
    height:17px;
}
}

使用CSS并相应地将div放在图像上？

0 个答案: