CODEWITHSUNDEEP
htmlcssscrollabsolute
uhsl_m
uhsl_m

Reputation: 342

make an absolute div be positioned off screen with scrolling

I have an absolutely placed div which uses the CSS as such:

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

My body and HTML both have a min-height and width. However when I reduce the browser window to below the min size, the absolute div does not stick to the far top right, instead it follows the viewport in and then stays positioned as I scroll (not following the viewport back).

How can I ensure this div stays suck to the top right of the HTML/body, even if that means being off screen until scrolled to?

Here is the HTML Structure:

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

And the 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>

Upvotes: 1

Views: 2731

Answers (2)

Evochrome
Evochrome

Reputation: 1215

If I understand you correctly:

You have to give body position: relative and add some javascript to keep the offset() of the absolute element.

Have a look yourself

$(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>

Hope I got you right and helped :)

Cheers,

Evoc

Upvotes: 1

Asad
Asad

Reputation: 3160

use absolute position with .topRightOverlay class . hope will solve the problem

Upvotes: 0

Related Questions