сделать абсолютный div за пределами экрана с прокруткой

У меня есть абсолютно размещенный div, который использует CSS как таковой:

.overlay {
  position:absolute;
  margin:0.5%;
  z-index:100;
}
.topRightOverlay {
  top:0;
  right:0;
}

Мое тело и HTML имеют минимальную высоту и ширину. Однако, когда я уменьшаю окно браузера до размера ниже минимального, абсолютный div не прикрепляется к крайнему правому верхнему углу, вместо этого он следует за областью просмотра, а затем остается на месте при прокрутке (не следуя за областью просмотра назад).

Как я могу гарантировать, что этот div останется в правом верхнем углу HTML/тела, даже если это означает, что он будет за пределами экрана до прокрутки?

Вот структура HTML:

<html lang="en">
  <body>
    <form runat="server">
      <div class="overlay topRightOverlay">
        <!-- overlay content -->
      </div>
      <!-- content placeholder for content pages -->
    </form>
  </body>
</html>

И HTML, Body CSS:

body, html {
    height: 100%;
    min-height:600px;
    min-width:800px;
    overflow:hidden;
}
html {overflow:auto;}


body,
html {
  height: 100%;
  min-height: 600px;
  min-width: 800px;
  overflow: hidden;
}
html {
  overflow: auto;
}
form {
  height: 100%;
}
.overlay {
  position: absolute;
  margin: 0.5%;
  z-index: 100;
}
.topRightOverlay {
  top: 0;
  right: 0;
}
<html lang="en">

<body>
  <form runat="server">
    <div class="overlay topRightOverlay nonInteractive">
      This is an overlay
    </div>
    <!-- content placeholder for content pages -->
  </form>
</body>

</html>


scroll html css absolute
person uhsl_m    schedule 22.03.2016    source источник
comment
Можете ли вы добавить HTML-структуру, которую вы используете, в этот пост?   -  person Martijn de Langh    schedule 22.03.2016

Ответы (2)


arrow_upward
1
arrow_downward

Если я правильно вас понял:

Вы должны указать тело position: relative и добавить некоторый javascript, чтобы сохранить offset() элемента absolute.

посмотри сам

$(document).ready(function(){
var posY;
document.onscroll = function(){
	posY = 100 + $(window).scrollTop();//locate needed Y position 
	$("#absDiv").offset({top: posY}); //Apply position
};
})
body{
  margin:0;
  padding:0;
  width: 100%;
  position: relative;
}

section {
  height: 1500px;
  width:100%;
  background-color: #2ecc71;
}

#absDiv {
  width: 80px;
  padding: 5px;
  line-height: 17px;
  position:absolute;
  right:0;
  top:100px;
  background-color: #d35400;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="absDiv">
      I'm pretty fixed to this place...
    </div>
    <section>
    </section>
</body>

Надеюсь, я вас правильно понял и помог :)

Ваше здоровье,

Эвок

person Evochrome    schedule 22.03.2016

arrow_upward
0
arrow_downward

используйте абсолютную позицию с классом .topRightOverlay. надеюсь решит проблему

person Asad    schedule 22.03.2016
comment
Я даю плавающему div оба этих класса. Я выделил его, чтобы избежать дублирования. У меня есть topLeftOverlay, bottomRightOverlay и т.д. - person uhsl_m; 23.03.2016