CODEWITHSUNDEEP
htmlcss
Potatoe
Potatoe

Reputation: 19

resizing window and keeping div in same place

I have currently having issues keeping my div in the same place when the window is resized. In the example, it is .add div. The issue I am having is that it is going above the view region of the page, and I can't scroll to that portion of the page so I can't even see that when I resize.

Here is the code. http://jsbin.com/kazizeruxi/1/

This is the part that I have tried dealing with

<div class = "add" align = "center">
<!--Everything inbetween -->
</div>

Ideally I am trying to keep the entry (in the farthest up left) to stay in the upper left no matter how it is resized. I have tried messing around with media queries, but to no avail. It just turned out to be very inefficient with different browser sizes.

Any suggestions?

Upvotes: 0

Views: 2137

Answers (2)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

The proper way to do that is to give your element the position : fixed then it will have a fixed position from the root element or the body not the parent.

let us say you want it to be centered on the screen you can use this

.add{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0)
}

of if you have a fixed with and height you can use margin instead of transform

.add{
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -50% 0 0 -50%
}

if you give it an position: absolute and the parent has a position: relaive then it will move with the parent element on resize

Upvotes: 0

Ethaan
Ethaan

Reputation: 11376

Just give them a absolute position.

.add {
    position: absolute;
}

Upvotes: 1

Related Questions