CODEWITHSUNDEEP
cssposition
sigug
sigug

Reputation: 1179

Have an element always at the same position with window resizes

I have the following testpage: ***

With a resolution of 1920x1080 the icon bar is located above the purple line. On any other resolution it isn't anymore. What is the best way to accomplish this (without javascript if possible)?

While I also would love to have the div element scale automatically, this is only the second problem. The main issue would be to have it always at the specific position. As you can see % doesn't work.

#icons {
position: absolute;
right: 11%;
bottom: 12%;
width: auto;
height: auto;

z-index: 8;
max-width: 60%;
}

Do I have to work with "rem" or something along those lines (didn't work when I tried it either)? Is there even a way to do this? Having an element in the top left corner obviously is very easy, since it will always stay the same even when resizing. With this position there's also the problem of extra toolbars or similar - the position changes as soon as you hide the toolbar of the browser for example. Any help appreciated!

Upvotes: 0

Views: 6952

Answers (2)

electrikmilk
electrikmilk

Reputation: 1043

Have you thought of trying:

#icons {
  position: fixed;
  right: 11%;
  bottom: 12%;
  width: auto;
  height: auto;
  z-index: 8;
  max-width: 60%;
}

I use fixed for stuff I want to stay on the same spot, it usually "fixes" it to stay in its set place.

Upvotes: 3

Mr Lister
Mr Lister

Reputation: 46549

The text is absolutely positioned to the right and bottom edges of the window, so the solution is to position the background there too. Change top center to bottom right.

body {
  font-family: Arial, "Myriad Pro";
  font-size: 11px;
  color: #ffffff;
  background: #202020 url(img/body_back.jpg) no-repeat bottom right fixed;
  background-size: cover;
}

Upvotes: 2

Related Questions