Question

我目前有一个工作系统，你检查它覆盖图像的复选框，然而，我遇到的问题是将图像置于计算机屏幕内，所以它不在最边缘。 Cany有人帮忙吗？

<html><head>
    <style>
        .overlay {
            display: none;
            position: absolute;

        }
        .right {
    position: absolute;
    right: 0px;
    width: 300px;
    border:3px solid #8AC007;
    padding: 10px;
}
        #map {
            position: relative;
            right: -780px;
            width: 452px;
            height: 344px;
            background: url(BLANK-COMPUTER-SCREEN.png);

        }
        #station_A { top: 5px; left: 85px }
        #station_B { top: 150px; left: 180px }
        .hover { color: green }
    </style>
<div id="map" >
        <span id="station_A" class="overlay"><img style="background:url(/BLANK-COMPUTER-SCREEN.PNG)" src="/tn_WhiskersPrinceworkup.png" /></span>
        <span id="station_B" class="overlay">Highlight image here.</span>

    </div>

    <p>
        <h2>Choose a Shirt</h2>
        <form>
            <input type="checkbox" name="image" value="station_A">Station Alfa<br>
            <input type="checkbox" name="image" value="station_B">Station Beta
            <input type="checkbox" name="image" value="bandanna" id="checkbox1">Bandanna
        </form>
    </p>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script>
  $(document).ready(function () {
    $("input[type='checkbox']").change(function () {
        var state = $(this).val();
        $("#" + state).toggleClass("overlay");
    });
    $('#checkbox1').change(function () {
        if (this.checked) $('#map').fadeIn('slow');
        else $('#map').fadeOut('slow');

    });
});
    </script>

Fiddle就在这里。

Answer 1

您需要将position:absolute设置为#station_A和#station_b而不是.overlay，因为您使用.overlay来切换jQuery，所以它会松散了财产。

这是一个片段：

$(document).ready(function() {
   $("input[type='checkbox']").change(function() {
     var state = $(this).val();
     $("#" + state).toggleClass("overlay");
   });
   $('#checkbox1').change(function() {
     if (this.checked) $('#map').fadeIn('slow');
     else $('#map').fadeOut('slow');

   });
 });

.overlay {
  display: none;
}
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #8AC007;
  padding: 10px;
}
#map {
  position: relative;
  /*right: -780px; removed for demo purposes */
  width: 452px;
  height: 344px; 
  background: url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png) no-repeat;
}
#station_A {
  top: 8%; /* whatever you like */
  left: 5%; /* whatever you like */
  position: absolute;
}
#station_B {
  top: 45%; /* whatever you like */
  left: 15%; /* whatever you like */
  position: absolute
}
.hover {
  color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="map">
  <span id="station_A" class="overlay"><img style="background:url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png)" src="//lorempixel.com/270/240" /></span>
  <span id="station_B" class="overlay">Highlight image here.</span>
</div>
<p>
  <h2>Choose a Shirt</h2>

  <form>
    <input type="checkbox" name="image" value="station_A">Station Alfa
    <br>
    <input type="checkbox" name="image" value="station_B">Station Beta
    <input type="checkbox" name="image" value="bandanna" id="checkbox1" />Bandanna
  </form>
</p>

Answer 2

问题是由于z-index问题我将图像移到了前面，并且在css更改后按钮现在正常工作。

 #VneckTshirtImage 
{ 
     left: 138px; 
     top: 457px; 
     position: absolute; 
     width: 118px;
     height: 174px;
     z-index:28;
}

如何使叠加适合另一个图像

2 个答案: