CODEWITHSUNDEEP
htmlcss
user7461846
user7461846

Reputation:

keep a button fixed, but inside body

body{
    max-width:1366px;
}

.gotop{
    position:fixed;
    right:9px;
    bottom:7px;
    cursor:pointer;
    width:25px;
}

gotop is a button to scroll page on top and it must not be scrollable, i.e. must be fixed.

Problem is on monitors greater than 1366 px. The button is far right from the body.

How to keep it fixed, but inside body?

Upvotes: 0

Views: 1356

Answers (4)

peresleguine
peresleguine

Reputation: 2403

One possible solution is to omit top, right, bottom, left values for the fixed button. This way it will be sticked to the container:

.container {
  position: relative;
  max-width: 800px;
  height: 200vh; /* for scrolling demo */
  margin: 0 auto;
  border: 1px solid black;
}

.button-wrapper {
  position: absolute;
  right: 35px; /* button width plus margin */
  top: 30%; /* or whatever you need */
}

.button {
  position: fixed;
  width: 25px;
  height: 25px;
  cursor: pointer;
  background: black;
}
<div class="container">
  <div class="button-wrapper">
    <div class="button"></div>
  </div>
</div>

Upvotes: 1

DreamTeK
DreamTeK

Reputation: 34297

What you asking is rather an old way of doing things but it can be achieved.

  • Set the width of body.
  • Set fixed element to center.
  • Offset center by width of body and fixed element.

html,
body {
  position:relative;
  height: 100%;
  max-width: 200px;
  margin: 0 auto;
  border:1px solid #111;
}

.gotop {
  position: fixed;
  left:50%;
  bottom: 7px;
  cursor: pointer;
  width:40px;
  background:#eee;
  margin-left:60px;/*half width of body minus width of gotop*/
}
<div class="gotop">TOP</div>

Upvotes: 0

ProEvilz
ProEvilz

Reputation: 5455

I wouldn't recommend using max-width on the body... you should put it on a div that wraps everything in the page instead.

Then place your button at the bottom of wrapper with the following CSS applied. Tweak the values to get a better position if you need it.

.wrapper{
  position: relative;
  height:200vh;
  width: 100%;
  max-width:400px;
  background: #000;
}

.holder{
  position: absolute;
  top:92.5%;
  right:0;
  background: #ccc;
}

.button{
  height:30px;
  width: 70px;
  position: fixed;
  margin-left:-70px; /* minus width */
  bottom:10%;
}
<div class="wrapper">
  <div class="holder">
    <button class="button">Test</button>
  </div>
</div>

Upvotes: 0

sarbudeen
sarbudeen

Reputation: 170

Try This

body{
    max-width:1366px;
    background:#f1f1f1;
}

.gotop{
    position:absolute;
    right:25px;
    bottom:25px;
    cursor:pointer;
}
<body>
<button class='gotop'>TOP</button>
</body>

Upvotes: 1

Related Questions