定位有问题

Question

我做了一个画廊。你可以在这里看到它当您单击图像时，会出现箭头。

$(document).ready(function() {
  var curr = 0;
  var length = $('.image').length;

  console.log(length);

  //er is javascript, anker tag weghalen
  $('.images a > *').unwrap();

  $('.image').click(function() {
    //openen overlay
    $('#overlay-container').addClass('overlay');

    curr = $(this).index() + 1;

    setTimeout(
      function() {
        $('#main').before('<img id="selected" src="./images/' + curr + '.png"/>');
        $('#arrow-left').removeClass('arrow-display');
        $('#arrow-right').removeClass('arrow-display');
      }, 60);
  });

  //sluiten overlay, image en arrows
  $('#overlay-container').click(function() {
    $('#overlay-container').removeClass('overlay');
    $('#wrapper #selected').remove();

    $('#arrow-left').addClass('arrow-display');
    $('#arrow-right').addClass('arrow-display');

  });

  $('#arrow-left').click(function() {
    if (curr > 1) {
      curr--;
    } else {
      //code gaat teruguit van teemr->myspace
      curr = $('.image').index() + 1;
    }
    $('#main').before('<img id="selected" src="./images/' + curr + '.png"/>');
  });

  $('#arrow-right').click(function() {
    if (curr < length) {
      curr++;
    } else {
      //code gaat terug nar 1 dus van myspace -> teemr
      curr = 1;
    }
    $('#main').before('<img id="selected" src="./images/' + curr + '.png"/>');
  });
});

body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
/* Wrapper voor de gallery */

#wrapper {
  width: auto;
  height: auto;
}
/* Main houdt thumb images bij elkaar */

#main {
  width: 680px;
  max-height: 150px;
  position: relative;
  top: 600px;
  left: 30%;
  padding: 10px;
  padding-bottom: 30px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  background-color: #dedede;
  border: 1px ridge #9a9a9a;
  border-radius: 6px;
}
/* Deze class gebruiken voor elke thumb image */

.image {
  width: 100px;
  height: 100px;
  padding: 15px;
  position: relative;
  top: -20px;
  left: -20px;
  float: inherit;
  transition: 0.5s;
}
/* muis hovert over een thumb image */

.image:hover {
  transition: 0.6s;
  height: 150px;
  width: 150px;
  position: relative;
  top: -30px;
  left: -20px;
  clear: both;
  cursor: pointer;
}
/*laatste image iets meer ruimte geven rechts */

.image:last-child {
  padding-right: 40px;
}
/* overlay als er op een afbeelding geklikt wordt */

.overlay {
  background-color: #1f1f1f;
  opacity: 0.82;
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 1;
  transition: 0.25s;
}
/*geselecteerd plaatje verschijnt in het groot in de browser*/

#selected {
  position: absolute;
  left: 35.0758%;
  top: 5%;
  width: 400px;
  height: 400px;
  z-index: 2;
  padding: 50px;
  border-radius: 10px;
  background-color: rgba(232, 232, 232, 0.9);
  box-shadow: 1px 1px 5px 1px #e8e8e8;
}
/*pijl naar rechts als er een afbeelding geselecteerd is */

#arrow-right {
  width: 50px;
  height: 350px;
  font-size: 26pt;
  font-weight: 900;
  text-align: center;
  line-height: 350px;
  position: relative;
  top: -416px;
  left: 1098px;
  z-index: 3;
  cursor: pointer;
}
/*pijl naar links als er een afbeelding geselecteerd is */

#arrow-left {
  width: 50px;
  height: 350px;
  font-size: 26pt;
  font-weight: 900;
  text-align: center;
  line-height: 350px;
  position: relative;
  top: -65px;
  left: 34.95%;
  z-index: 3;
  cursor: pointer;
}
/*hover over pijl links*/

#arrow-left:hover {
  transition: 1s;
  background-color: #535352;
  border-radius: 3px;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  opacity: 0.8;
}
/*hover over pijl rechts*/

#arrow-right:hover {
  transition: 1s;
  background-color: #535352;
  border-radius: 3px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  opacity: 0.8;
}
/*deze klasse verbergt de arrows*/

.arrow-display {
  display: none;
}
/*Scrollbar aanpassen*/

#main::-webkit-scrollbar {
  width: 12px;
}
#main::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 1px 1px 1px rgba(198, 198, 198, 1);
  border-radius: 5px;
}
#main::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 1px 1px 6px rgba(66, 66, 66, 0.9);
  background-color: #b5b5b5;
}
*::selection {
  background-color: rgba(0, 0, 0, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<body>

  <div id="wrapper">

    <div id="overlay-container">
      <!-- Afbeelding wordt hier weggeschreven dmv jquery -->
    </div>

    <div id="main">
      <div class="images">
        <figure>
          <a href="./images/1.png" target="_blank">
            <img class="image" src="./images/1.png" alt="1" />
          </a>
          <a href="./images/2.png" target="_blank">
            <img class="image" src="./images/2.png" alt="2" />
          </a>
          <a href="./images/3.png" target="_blank">
            <img class="image" src="./images/3.png" alt="3" />
          </a>
          <a href="./images/4.png" target="_blank">
            <img class="image" src="./images/4.png" alt="4" />
          </a>
          <a href="./images/5.png" target="_blank">
            <img class="image" src="./images/5.png" alt="5" />
          </a>
          <a href="./images/6.png" target="_blank">
            <img class="image" src="./images/6.png" alt="6" />
          </a>
        </figure>
      </div>
    </div>

    <div id="arrow-left" class="arrow-display">
      < </div>
        <div id="arrow-right" class="arrow-display">></div>

    </div>

</body>

问题是，画廊中的左箭头没问题，当我调整浏览器大小时它不会移动。

但我的右箭头可以。

我试过很多东西，比如位置：绝对和相对，也在左或右或像素和 %

之间切换

我自己解决不了请帮帮我

提前致谢

Answer 1

试试这个，在这样做之前，从图像中删除左和上，给左箭头 left 0 和右箭头 right 0 并给这两个 div 绝对位置：（我做了内联 styhat 修复它。）

<div id="wrapper">

    <div class="overlay" id="overlay-container">
      <!-- Afbeelding wordt hier weggeschreven dmv jquery -->
    </div>
<div style="position: relative; left: 35.0758%; top: 5%; height: 400px; width: 503px;">
    <img id="selected" src="./images/1.png"><img id="selected" src="./images/2.png"><img id="selected" src="./images/3.png"><img id="selected" src="./images/2.png"><img id="selected" src="./images/1.png"><img id="selected" src="./images/1.png"><img id="selected" src="./images/1.png"><img id="selected" src="./images/1.png"><img id="selected" src="./images/1.png"><div id="main">
      <div class="images">
        <figure>

            <img class="image" src="./images/1.png" alt="1">


            <img class="image" src="./images/2.png" alt="2">


            <img class="image" src="./images/3.png" alt="3">


            <img class="image" src="./images/4.png" alt="4">


            <img class="image" src="./images/5.png" alt="5">


            <img class="image" src="./images/6.png" alt="6">

        </figure>
      </div>
    </div>

    <div id="arrow-left" class="">
      &lt; </div>
        <div id="arrow-right" class="">&gt;</div>
  </div>
    </div>

Answer 2

试试这个：

#arrow-right {
  width: 50px;
  height: 350px;
  font-size: 26pt;
  font-weight: 900;
  text-align: center;
  line-height: 350px;
  position: relative;
  top: -365px;
  left: 124.95%;
  z-index: 3;
  cursor: pointer;
    }

#arrow-left {
  width: 50px;
  height: 350px;
  font-size: 26pt;
  font-weight: 900;
  text-align: center;
  line-height: 350px;
  position: relative;
  top: -13px;
  left: 34.95%;
  z-index: 3;
  cursor: pointer;
}

更改#arrow-right 和#arrow-left、top 和left 属性。

http://jsfiddle.net/Harpreet_devgun/w6xx598u/

定位有问题

Having problems with positioning

html

css

jquery

css-position