Коробки css не прокручиваются

Я создаю сайт для своего брата, и на главной странице я должен сделать несколько блоков css, которые должны быть в том же положении, что и изображение, в котором есть несколько фоторамок. Я годами не выбирал html и css, и у меня возникают проблемы с размещением ящиков на месте, особенно потому, что если я прокручиваю, ящики не следуют за ними. Вот что у меня есть на данный момент:

#wrapper {
  height: 100%;
  width: 100%;
  overflow: auto;
  background-repeat: no-repeat;
  background-image: url(images/fundo2.jpg);
  background-size: cover;
  background-position: top;
}

#header-wrapper {
  overflow: hidden;
  width: 100%;
  background: #252525;
  text-align: center;
}

#languageflags {
  position: relative;
  margin-top: 20px;
  margin-left: -20px;
  width: 100%;
  height: 2px;
  text-align: right;
}

#menu {
  overflow: visible;
  background: #252525;
  min-height: 30px;
  max-height: 66px;
  padding: 2px;
}

#page {
  width: 100%;
}

#content {
  overflow: visible;
  width: 100%;
  height: 120%;
}

#linkone {
  position: absolute;
  top: 50%;
  left: 27.2%;
  width: 14%;
  height: 44%;
  padding: 1%;
  background: rgba(239, 64, 53, 0.2);
}

#linktwo {
  position: absolute;
  top: 47.5%;
  left: 52%;
  width: 14.5%;
  height: 30%;
  padding: 1%;
  background: rgba(239, 64, 53, 0.2);
}
<body>
  <div id="wrapper">
    <div id="header-wrapper">
      <div id="languageflags">place for other languages</div>
      <div id="logo">logo on header</div>
      <div id="menu" class="container">
        <ul>
          menu goes here
        </ul>
      </div>
      <!--end menu-->
    </div>
    <!--end header-->
    <div id="page" class="container">
      <div id="content">
        <div id="linkone">my box attempt</div>
        <div id="linktwo">second box attempt</div>
        <img src="images/fundo.jpg" style="width: 100%;" />
      </div>
      <!--end content-->
    </div>
    <!--end page container-->
  </div>
  <!--end wrapper-->
</body>

Таким образом, два окна должны были прокручиваться, но они остаются в одном и том же положении. Что я здесь делаю не так? Кто-нибудь может помочь? Спасибо заранее.

абсолютно позиционированные элементы позиционируются относительно ближайшего позиционированного предка - поскольку у вас нет ничего, что расположено между вашими ссылками и телом, ссылки позиционируются относительно тела

Pete 10.08.2018 15:31
0
1
133
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

к селектору #wrapper добавить position: relative

#wrapper {
    height: 100%;
    width: 100%;
    overflow: auto;
    background-repeat: no-repeat;
    background-image:url(images/fundo2.jpg);
    background-size:cover;
    background-position: top;
    position: relative; /* add this line */
}

Я бы добавил его в #content, иначе у вас будет та же проблема, что и сейчас - он размещается относительно всей страницы, а не только изображения

Pete 10.08.2018 15:27

спасибо .. помните комментарий @Pete в ответе и на вопрос

ashish singh 10.08.2018 18:50

Другие вопросы по теме